Using knockout.js, I have mouseover and mouseout events on a containing <div>. The handlers toggle boolean observables. Within the <div> is a <p> whose visibility is bound to those booleans. i.e. rolling over the <div> reveals the <p>. The contents of the <p> are bound to observables in the model.
What I've found is that if the bound contents of <p> contains an inline element - e.g. <em> - rolling over the text within the <em> causes the <p> to flicker. The same seems to happen for any inline element. If the contents of the <p> are not bound, the issue does not occur.
I have found a workaround for my application by using JQuery's mouseenter and mouseleave events.
All 3 cases are demonstrated in this fiddle.
Is this expected behaviour, a bug or an oversight on my part? Is there a workaround that doesn't depend on the JQuery events?
(issue verified in Chrome 21.0, Safari 6.0, and FF 10.0.2 in OS X 10.7.4 and Chrome and IE in Windows 7)
This is just the difference between mouseleave and mouseout, and is expected behaviour. This is outlined in this article here: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/
If I were to do this, I would do it with css. Unless you need to really know something or perform advanced actions/operations based on mouse hover, you can control basic visibility very easily (knockout not necessary in demo):
http://jsfiddle.net/WLShQ/
HTML:
<div class="hoverbox">
<p>Mouse over here...</p>
<p class="extra">Then roll over <em>this red text</em></p>
<p class="extra">It doesn't flicker!</p>
</div>
And the css
div.hoverbox p.extra {
display: none;
}
div.hoverbox:hover p.extra {
display: block;
}
Related
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}
The assumption behind this question is that the designer is using proportional queries in a Responsive Web Design and going from 1-column on a smartphone to 2 and 3-column on the displays where they will comfortably fit.
A content widget jQuery plugin (like a Recent Updates widget) should change it's character in the different layouts. In 1-column layout it might need to be 4 small text links and in 2 or 3-column layouts it can include thumbnails and extra text.
For reference, here's the code as the end-user of the content widget would see it.
HTML:
<section id="sidebar">
<section id="latestupdates"></section>
</section>
JS:
(function($){
$(function(){
$("#latestupdates").widgetco_latestupdates();
});
})(jQuery);
I think the best way to hook into the designers layout changes is this. Ask for the breakpoints as parameters for widgetco_latestupdates during initialization and use the resize events to toggle css classes.
Is this even the right method? What are the pitfalls with doing this?
UPDATE:
Since asking, I have found enquire.js which will handle running the queries. That still leaves the question of this being the right method.
If you are careful with the classes you assign to the content, you can likely control everythinhg with standard CSS.
For example, say your desktop output was something like
<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
read more
</article>
Then in your CSS you manage what content to show on which devices with
#media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}
#media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}
I think if you can use CSS to manage the different layouts it will be more flexible and easier to update going forward.
Good luck!
EDIT
If you are thinking about ajax to add / remove content based on the visitor's viewport, here are two interesting links:
http://filamentgroup.com/lab/ajax_includes_modular_content/
Project on Github
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.
It seems that in IE, some delegates may somehow cause another delegate to fail to work.
This is one possible case:
<html>
<head>
<script src='jquery-1.4.2.min.js'></script>
<script>
$(function() {
$('#main')
.delegate('div', 'click', function() {
alert('on div!');
})
.delegate('[name=first]', 'change', function() {
alert('first!');
})
.delegate('[name=second]', 'change', function() {
alert('second!');
})
;
});
</script>
</head>
<body>
<div id="main">
<input name="first" />
<input name="second" type="checkbox" />
<div>Test</div>
</div>
</body>
</html>
In this particular case, the handler for the checkbox won't fire.
As usual, the problem doesn't show up in other browsers.
Changing the call orders may solve an issue , but at the risk of causing another. Note that the delegate works on mutually exclusive elements so the order should be irrelevant.
What causes this?
I cannot offer an explanation; but I have encountered similar behavior in IE8. Oddly, in my case everything worked well if I rearranged bindings so that the delegate binding on one of my checkboxes came before delegate bindings on other form elements. A delegated click handler on a link before the checkbox handler did not seem to cause problems.
In my case I had one click handler on a checkbox, two change handlers on select boxes, two click handlers on radio buttons, another click handler on another class of checkboxes, and several click handlers on links.
There are a lot of variables to account for and it is difficult to account for all of them here. For example, the delegated selector for the checkbox that caused a problem for me was an id selector while the selector for the innocuous checkboxes was a class.
It seems that the problem has been resolved in the latest version of jQuery or Internet-Explorer (as of this writing, 1.5 and 9, respectively).
I ran into this as well. For some reason, reversing the order of registering the events fixed it for me. I'd love an explanation though.