Is there way to open pop up Iframe lightbox on hover of any div.
If any of you guys knows such examples can you please post the link here
Thank you
Using colorbox, a jquery Lightbox alternative. Very simply you, can use an anchor element :
<a class="youtube cboxElement" href="http://www.youtube.com/embed/VOJyrQa_WR4?rel=0&wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>
Check the Demos
If you want the popup to appear on hover, I think you will have to customize it on your own, by adding an event listener to the hoverable element :
$('#hoverableElement').hover(
function(){
$('#hoverableElement').colorbox();
} ,
function(){
$.colorbox.close();
}
);
where the element you want to trigger the popup will have the ID "hoverableElement".
Related
I have a button that I want to open the mdl-layout__drawer. For example, see the official example here and note the menu icon opens the drawer upon clicking.
I have a button that, upon clicking, I want the drawer to open. I have tried both of the jQuery selectors below with the jQuery.click() method. Neither works - only a screen flicker. Any ideas?
$(".mdl-layout__drawer-button").click();
$(".material-icons:contains('menu')").click();
Make sure your code is inside $(document).on('pageinit') and you are using the correct selector to detect the button click like in the example below:
$(document).on('pageinit', function() {
$("#idOfTheButton").click(function() {
$(".mdl-layout__drawer-button").click();
});
});
No need to click the menu button, toggle sidenav visibility with material API
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover
I have a button inside a jquery mobile popup div. I will like to set a onclick javascript function to let the popup div close without using the id of the div once the button clicked. Any solution?
Can call parent too:
$(this).parent(".ui-popup").popup("close");
have a very basic page that I am working on that contains thumbnail images and a main image. When the thumbnail images are clicked I am using document.getElementById to change the main image. Easy to do but I now want to change my main image from landscape to portrait. This will mean that now when clicking the thumbnail I will not only need to change the main image but also the div tag dimensions. I am new to Javascript and was wondering if someone could give me a quick point in the right direction of how to go about this.
Thank you in advance for any help,
Margate
I would suggest adding/changing a CSS style class on the element and then configuring that class with all the necessary modifications. There's a lot you can do with just CSS.
You can either use a semi colon in your onclick event and add more javascript calls, or create a JavaScript function that will do all of your neccesary changes and call that method from your onclick event.
function changeStuff(){
document.getElementById("myThing").DoStuff()
document.getElementById("myOtherThing").DoOtherStuff()
}
<div id="myThing">
<img id="myOtherThing" onclick="cangeStuff();"></img>
</div>
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.