I'v got multiple div's with thumbnails, the div also includes an inner div with an standard picture, clicking on a thumb will show the picture in the inner div.
The problem: When I open another div the last opened picture will still show.
JQuery
$('.thumbsmall img').click(function(){
$(".imageshow").html($("<img>").attr("src", this.src));
})
HTML
<div class="modal-body">
<h2>3D automotive visualisatie</h2>
<div class="imageshow"></div>
<p>Visualisatie 3D automotive</p>
<ul class="list-inline item-details">
<li>Klant: <strong><a>Eigen project</a></strong></li>
<li>Datum: <strong><a>WIP</a></strong></li>
<li>Wat?: <strong><a>3D productie</a></strong></li>
<li>Tags: <a>3D, vray, automotive, hdri</a></li>
</ul>
<button type="button" class="btn btn-lg btn-success" data-dismiss="modal">
<i class="fa fa-times"></i> Sluit
</button>
</div>
<div class="thumbsmall">
<ul>
<li><img src="img/3d15.png" alt="3d design"></li>
<li><img src="img/3d3.png" alt="3d design"></li>
</ul>
</div>
Link
http://robbyquintiens.be
Situated in the portfolio section
Thanks :)
Try this one :
$('.thumbsmall img').click(function(){
$(".imageshow").html($('img.class-of-the-other-image').prop("src", $(this).prop('src')));//newer jquery
$(".imageshow").html($('img.class-of-the-other-image').attr("src", $(this).attr('src')));// older jquery
})
Don't forget to put the class-of-the-other-image on the html or change for the class name you want to.
Related
I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!
I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)
I have dynamically generated div's whose content contains an anchor link and path to an image.
I also have a modal box with an image tag in.
What I am trying to do is onclick of the anchor link, set the image tag path which is in the modal box.
Currently what my code does is no matter what anchor link I click, its always setting image path to the first path link.
Here is my JSFiddle link
JSFiddle
My Code:
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
<span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
$(".ads-links").each(function(index){
$(".ads-links").on("click", function(e){
e.preventDefault(); var imgsrc = document.getElementById('sLink')
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src',imgsrc.innerHTML);
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
If you click on Test title one, you will image name 350x250 displayed in the modal box, and if you close the modal box and now click on test title two, instead displaying the image 450x350 just displays the first image.
What am I missing?
Thanks and appreciate it
You are selecting the first sLink no matter which is anchor is clicked.
var imgsrc = document.getElementById('sLink');
Instead you need to base this on the sLink closest to the anchor clicked.
var imgsrc = $(this).parent().find('#sLink')[0];
//This goes up a level and finds the sLink that is in that same parent//
Note
that an ID should be unique and is likely causing part of your confusion, in this case a class might be just as useful.
your outer loop is superfluous and might cause you trouble down the road.
Updated Your Fiddle: https://jsfiddle.net/0dmc9rvt/25/
$(".ads-links").each(function(index) {
$(this).on("click", function(e) {
e.preventDefault();
debugger;
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src', $(this).parent().find('.sLink').html());
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/">
<h2>Test Title One</h2>
</a>
<div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span class="hide sLink">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/">
<h2>Test Title Two</h2>
</a>
<div class="coupon-text"></div>
<span class="hide sLink">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
I am trying to create a toggle menu bar for php website.
html code
<div class="row">
<div class="col-sm-4 col-md-3 sidebar">
<div class="mini-submenu" >
<img src="icons/nav_icon.png" height="30" width="30" >
</div>
<div class="list-group">
<span href="#" class="list-group-item">
Submenu
<span class="pull-right" id="slide-submenu"><i class="fa fa-times"></i></span>
</span>
<i class="fa fa-comment-o"></i> Lorem ipsum
</div>
</div>
</div>
script code
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
At present the one that i have works fine but the problem is that when the first time i open the page the submenu that is under the nav_bar image gets opened automatically and when i click on cross button
then the nav_bar image appears like this
but what i want is opposite to it. i wish that whenever the page is loaded the image should appear first and when i click on the image the submenu should appear under it.
change your script to
$(function(){
$('.list-group').hide();
$('.mini-submenu').show();
$(function(){
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})
});
It will work fine :
JavaScript:
(function($){
$('.list-group').hide();
$('#slide-submenu').on('click',function() {
$(this).closest('.list-group').fadeOut('slide',function(){
$('.mini-submenu').fadeIn();
});
});
$('.mini-submenu').on('click',function(){
$(this).next('.list-group').toggle('slide');
$('.mini-submenu').hide();
})
})(jQuery);
Alright so I am trying to make a PHP page builder using jQuery and bootstrap.
I got almost everything working except being able to see the change in the column size.
My problem is I am not sure how to replace the column size class variable which could be anything between col-lg-1 to col-lg-12
So using jquery I would like to be able to do the following.
Get the current column size base on class: So if the column is col-lg-4 I want to get the 4
replace the 4 with a 3 or 5 based on which direction the user selected.
remove the class col-lg-4 and add either the class col-lg-3 or col-lg-5
This way on the screen the user can see how big that column is going to be.
To provide more information. Here is the HTML
<div class="col-lg-4 bs-example-popover">
<div class="popover" style="width:100%;">
<h3 class="popover-title">[Module Title] <button type="button" class="close">×</button></h3>
<div class="popover-content">
<p>[Module Description]</p>
<ul class="list-unstyled">
<li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-right"></span></button></li>
<li class="pull-right"> </li>
<li class="pull-right"><button class="btn btn-default btn-xs"><span class="icon-icomoon-arrow-left"></span></button></li>
<li> </li>
</ul>
</div>
</div>
</div><!-- /column -->
and my basic JS will get the parent and the button. But I don't know how to get just the size of the class, then add or subtract, and lastly replace the class.
$('.page-builder-column ul li .btn').on('click', function(e) {
e.preventDefault();
var _btn = $(this).find('span'),
_parent = $(this).parents().eq(4);
if (_btn.hasClass('icon-icomoon-arrow-right')) {
console.log('larger');
}else{
console.log('smaller');
}
console.log(_parent.hasClass('col-lg-*'));
});
You can do the following:
_parent.attr('class').match(/\d+/)[0]
which will return the 4
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun