Hey all,
Earlier I received some help toggling between three hidden divs in a photo library. I'd like to add an underline to the anchors toggling which div to show. The script is dynamic... and therein lies my problem. I'm not sure how to tell which anchor to underline within the code. Suffice it to say that it's beyond my grasp!
I'd also like for the first of the three anchors, Promo, to load underlined.
Thanks for your help!
HTML:
<div class="text" id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left"><a class="showlink" id="show_promo">PROMO</a> <a class="showlink" id="show_studio">STUDIO</a> <a class="showlink" id="show_live">LIVE</a></p>
<div class="section" id="promo">
<p align="center">PROMO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="studio">
<p align="center">STUDIO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="live">
<p align="center">LIVE</p>
<p align="center">
<img src="#">
</p>
</div>
</div>
Javascript:
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
Try this:
$(function(){
$('a.showlink').css("text-decoration", "none");
$("#show_promo").css("text-decoration", "underline").click();
});
$('a.showlink').click(function(){
$('a.showlink').css("text-decoration", "none");
$(this).css("text-decoration", "underline");
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I am using a simple piece of JS to change the image that is in a div from plus to minus. I have multiple divs on this page which are generated dynamically. How could I specifically change the sign on the div that is clicked. Currently I have the same class for each div. This means whenever I click any div only the first divs image changes, not the div that was clicked.
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("plus")) {
image.src = "img/minus.svg";
} else {
image.src = "img/plus.svg";
}
}
Is the only way to fix this dynamically assigning new class to each div and generating multiple scripts for teach class?
EDIT:
I am using the same method as before but on a slightly different layout. Any reason why this isnt working?
<div class="open-link" style="display: block;">
<a href="#" class="img-change">
<p class="inner">Expand <br><img id="myImage" src="img/arrow-down.svg" width="20" height="20"></p>
</a>
</div>
JS
$(document).on('click','a.img-change',function(){
var $img = $(this).find('p.inner');
if($img.attr('src').match("down"))
$img.attr('src','img/arrow-up.svg');
else
$img.attr('src','img/arrow-down.svg')
});
Every img in your markup has the same id, this is bad, all elements, if they have an id, should be unique. This does NOT mean you should use a unique id on every image and a specific script for every button! That would be bad. Just remove the duplicate id's!
Then this is pretty easy, use jQuery to attach a click event to every div and look for the image within it
take off the in-line onclick
<div class="hover2 opacity">
and use jQuery
$(document).on('click','div.hover2',function(){
var $img = $(this).find('p.heading img');
if($img.attr('src').match("plus"))
$img.attr('src','img/minus.svg');
else
$img.attr('src','img/plus.svg')
});
You don't need to assign an id to the <img/> elements
HTML
<div class="hover2 opacity" onclick="changeImage(this)">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view
<span class="s-right">
<img src="img/plus.svg" width="20" height="20">
</span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage(el){
var img = el.querySelector('span > img');
img.src = (img.src.match("plus")) ? "img/minus.svg" : "img/plus.svg";
}
You can try this:
$(document).ready(function() {
$(".opacity").on("click", function() {
var source = $(this).find("img").attr("src"); // Gives source of image inside the presently clicked div
console.log(source);
if (source.match("plus")) {
console.log("match");
$(this).find("img").attr("src", "img/minus.svg");
} else {
$(this).find("img").attr("src", "img/plus.svg");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
U still can use $(this).find('img') to find img for selected div and change the src.
Example
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage1" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage2" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
So it your javascript, u can use this
$(document).on('click','div.hover2',function(){
$(this).find('img').attr("src","img/minus.svg");
}
Jsfiddle link -> https://jsfiddle.net/w1yb5fcc/1/
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
I want to write a script that changes page content but within a foreach array. I have this HTML:
<div id="bigleftproject">
<p>content which will be swapped</p>
</div>
<!-- thumbnails (foreach array -->
<div class="prj_thumb" id="thumb1">
<h2 class="active">project 1</h2>
<img src="../img/thumbnail1.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb2">
<h2 class="active">project 2</h2>
<img src="../img/thumbnail2.png" alt="thumbnail" width="100" height="50" />
</div>
<div class="prj_thumb" id="thumb3">
<h2 class="active">project 3</h2>
<img src="../img/thumbnail3.png" alt="thumbnail" width="100" height="50" />
</div>
<!-- end -->
and I have the beginnings of my jQuery script:
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/thumb1');
});
});
Essentially, what I am trying to achieve is for the jQuery script to grab the ID of '.prj_thumb' and pass that into the final part of the URL in the .load function.
Is this what you're looking for?
$(document).ready(function(){
$('.prj_thumb').click(function() {
$('#bigleftproject').load('http://www.mysite.com/projects/small/' + this.id);
});
});
Style class -
.btn {
}
Javascript (jQuery) -
jQuery(document).ready(function() {
jQuery(".btn").each(function(index, element) {
alert(this.id);
});
});
HTML -
<div class="btn" id="btn1"></div>
<div class="btn" id="btn2"></div>
<div class="btn" id="btn3"></div>
it works fine for one div
(function($) {
$(document).ready(function(){
$('#div1').hide();
$('a.plus').click(function(){
$('#div1').slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
How to make this slide toogle effect for multiple div on same page? I have multiple divs with different id to hide like #div1, #div2, div#3.
edit:
This is situation in html
<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>
<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>
(function($) {
$(document).ready(function(){
$('#div1, #div2, #div3').hide();
$('a.plus').click(function(){
$(this).next().slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
Presuming your HTML is something like this:
<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>
<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>
Then having a function like this will work for as many a.plus / div pairs you have:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
$(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
If your a.mores are, for whatever reason, nowhere near the divs themselves, you will have to set an attribute on the a.more to link it to a div, eg. (HTML)
<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>
... some more HTML
<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>
and Javascript:
(function($) {
$(document).ready(function(){
$('div.more').hide();
$('a.plus').click(function(){
var id = 'div' + $(this).attr('data-article');
$('div#' + id).slideToggle();
$(this).toggleClass("minus_icon");
return false;
});
});
})(jQuery);
Give your divs the same class (like 'div_to_toggle') and then instead of $('#div1'), $('#div2'), ... you can use one selector: $('.div_to_toggle') that will select them all:
$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();