I was wondering how I could create a collapsable dropdown menu showing picture links for my website. Perhaps just simply displaying a dropdown symbol which both opens and collapses to show the site's navigation.
Hoping this is possible?
Add a button or image to the document that will serve as the main
list activation button.
Create a div element that contains a ul
element.
In the ul, create li elements that contain the images you
wish to use.
Wrap each image in an a element (to make them
clickable).
Use JQuery's slideToggle() method on the click event of
your button to show/hide the div.
Use jquery, set your links div as hidden then use jquery toggle() or slideToggle() to toggle the hidden div. Here is a fiddle example:
https://jsfiddle.net/edencorbin/x4sw2b6e/2/
HTML
<img src="http://placehold.it/50x50">
<div class="thediv" hidden="hidden">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
</div>
Javascript
$(document).ready(function() {
$('#dropdownlink').click(function(e) {
e.preventDefault();
$('.thediv').slideToggle();
});
});
Related
i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test111</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test2222</div>
</div>
</div>
<div class="Widget">
<div class="press">
<a data-toggle="modal" data-target="#myModal"></a>
<div class="text">test3333</div>
</div>
</div>
Jquery :
$("#img1").click(function(){
$(".text").html("Its woking")
});
I just made a Bootply with following code:
$("a[data-toggle='modal']").click(function(){
$("a[data-toggle='modal']").removeClass("active");
$(this).addClass("active");
});
$("#myModal img").click(function(){
$("a.active").next(".text").html("Its working");
});
When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.
Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in
$(document).ready(function() {
// above code here
});
in order to work.
Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.
I've adjusted this in another Bootply with following code change:
$("#myModal img").click(function(){
$("a.active").closest(".Widget").find(".text").html("Its working");
});
When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.
Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.
For reference: http://api.jquery.com/closest/
can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:
$('.imgs').click(function(){
$(this).html()....
});
I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.
I would like to know how to trigger the third onclick in Javascript without changing the HTML code. I have tried runCMConversionEventTag(); but no luck.
<div id="cartAction_bottom">
<img src="http://www.footlocker.com/images/fl/shoppingcart/continue_shopping.jpg" alt="Continue Shopping">
<img src="http://www.footlocker.com/images/fl/shoppingcart/checkout.jpg" alt="Checkout">
<div class="centered">or</div>
<img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" alt="PayPal Checkout">
<p>
</p></div>
This will do it:
$("#cartAction_bottom a:last").click();
$("#cartAction_bottom") chooses that div by its id.
$("#cartAction_bottom a") would choose all of the anchors inside that div
$("#cartAction_bottom a:last") should choose the last anchor in that div.
The .click() function will run the click event as if you clicked on that element.
Here's a very primitive jsfiddle to test it with.
I have an unordered list of image thumbnails. Each thumbnail links to the full size image.
I use the YUI3 library to allow drag & drop reordering of the thumbnail images (just the out-of-the-box example code).
The problem is the link to the fullsize image: it is not draggable. Only the small portions underneath the thumbnail (with title and value) are draggable.
<ul>
<li class="imgcontainer">
<div>
<a href="/image.jpg">
<img src="thumbnail.jpg" border="0" alt="" />
</a>
</div>
<div class="left">Title</div>
<div class="right">$2.00</div>
<div class="clear"></div>
</li>
<!-- ... -->
</ul>
What is the best way to allow users to reorder the images in such an image gallery?
Add a drag handle icons to a corner of the list items?
Create a "reorder mode" in which the link anchors are removed, leaving only draggable images?
Or can it be set up so that the links still can be dragged?
Your problem is that the anchor tag is not a valid drag handle per default. You can change this by using removeInvalid('a') on your drag instance.
var dd1 = new Y.DD.Drag({
node: '#drag1'
});
dd1.removeInvalid('a');
Another option would be to remove the anchor tag
<div class="linked-image">
<img src="http://placekitten.com/50/50" border="0" alt="" />
</div>
and add a click listener to the image.
Y.on('click', function () {
alert('go to url');
}, '.linked-image');
Both approaches are demonstrated here: http://jsfiddle.net/xGQne/
Note that the click event fires after the drag is completed in both cases. You will need to differentiate between clicks and drags to make this work smoothly.
I have an html where I have bunch of text controlled by a show hide button, (say this code snippet is para). Now I would like to add additional layer of control on top of that. I would like to have a text box on top of the html page when it loads to have a option to hide or show para by default based on check uncheck of the text box.
Here is my code para
print $indexfd
qq~<div id="div_$var3">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$var3')" type="button" id="btn_show_$var3" value="showit">\n~,
qq~<input onclick="hideit('$var3')" type="button" id="btn_show_$var3" value="hideit"><br/>\n~,
qq~<ol id="$var3" style="display: none"><li><b>$var3->{name} \: $var3->{value}</b></li></ol>\n~,
qq~</div>\n~;
This isn't something Perl can do for you. You will need to do it in JavaScript. Have a look at the jQuery lib's function toggle(). That should do what you want. Add your paragraph and add some sort of button or whatever. Then add a click-handler to that button to toggle the paragraph.
Here's an excerpt from the documentation:
We can animate any element, such as a simple image:
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
We will cause .toggle() to be called when another element is clicked:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Don't forget to load the jQuery files in the <head> section of your HTML document.