I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>
mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/
HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});
you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example
Related
I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');
I have two groups of links all with the same class names, the only difference is the text in the .
I need to get the text for the clicked link and pass it to GA through GTM.
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I have created a custom javascript variable
function() {
$('section.products div.list').click(function() {
return $(this).closest('.item-set').find('header').text();
});
}
But the bleep thing isn't working as I expect (or at all). It returns "undefined".
Any assistance is greatly appreciated.
You shouldn't bind to click event in JS variable. You should use JS variables in GTM only for receiving values
The correct way to achieve your goal is:
1) Enable built-in variable Click Element (if you already have it, you can skip this step)
2) Create trigger, which will fire when you clicking on your links
CSS selector on the screenshot is .item-set .list a
3) Create JS variable
Code is: function() {
return $({{Click Element}}.closest('.item-set')).find('header').text();
}
3) Create a tag, which will send data to GA
Here you can use your variable form step 3 {{Click List Header}}
Maybe you are not capturing/storing the return $(this).closest('.item-set').find('header').text(); from the function?
When you for example immediately invoke your function and click a div, the text of the <header> will be logged to the console.
(function() {
$('section.products div.list').click(function(e) {
e.preventDefault(); // to prevent the default action of the click
console.log($(this).closest('.item-set').find('header').text());
return $(this).closest('.item-set').find('header').text();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-set">
<header>Section Title One</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
<div class="item-set">
<header>Section Title Two</header>
<section class="products">
<div class="list">
<img src="/ProductImages1.jpg">
</div>
<div class="list">
<img src="/ProductImages2.jpg">
</div>
<div class="list">
<img src="/ProductImages3.jpg">
</div>
</section>
</div>
I am learning js and jquery and have been trying to solve this litle issue I am having when trying to loop through a ul on the page and move a dom element specifically an image up two levels in my html. Here is what the html looks like:
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="imageurl.jpg" class="wp-post-image">
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
There are 10 li items in my ul but for readability purpose I only included one so you can see my html structure.
My javascript seems to be adding all the images before every featured-title div giving me piles of pictures instead of the one that is associated with that li.
$(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
So then I tried this using each but it does not seem to do anything.
$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
});
I was thinking maybe i need to use "this" in the code somewhere but I am new to javascript and not sure how to properly use "this" with the insert before, or if "this" is even the best option.
$('this.wp-post-image').insertBefore($('this.featured-title'));
Can anyone help me figure out what I am doing wrong? It is driving me nuts!
You need to iterate each image
For each image, get his parent .slick-slide.
Prepend the image to the .slick-slide using .prepend
Optional: If you need to insertBefore .featured-title see the comment.
$('.wp-post-image').each(function() {
var $this = $(this),
parentLi = $this.parents('.slick-slide').first();
$this.prependTo(parentLi);
//$this.insertBefore(parentLi.find('.featured-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
removed the "wp-post-image" class to show how it was look before
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" />
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
I'm using double click on the img
This code
$("#insert-zone").on("dblclick", ">div>img", function(){
console.log($(this).parentNode.className(spanDefCat));
var answer = confirm ("Set Defaul Cat to " +$("#txt_CategoryID").val()+"?")
if (answer){....
.
This is the div item
<div class="item-container cart-item sameCat">
<div class="SetDefault">
<img border="0" title="Carrie Style Silver Name Necklace" src="medium_101-01-071-02.jpg" alt="1102">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<span class="spanDefCat">DefaultCat: 32</span>
</li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>
When I double click the img, I need to go back to parent cart-item than contains li with span class spanDefCat like you see it in code and change the DefaulCat to 80 or what ever I need to change the span.
full Html
<div class="ui-widget-content">
<ol id="insert-zone" class="ui-droppable ui-sortable">
<div class="item-container cart-item sameCat">
<div class="item-container cart-item ">
<div class="item-container cart-item sameCat">
<div class="item-container cart-item sameCat">
</ol>
</div>
you can use $(this).parent().find('.spanDefCat').html($("#txt_CategoryID").val())
This will change the value of all .spanDefCat in the parent of the image.
Add this code inside .on function
var newCatVal = "DefaultCat: "+$("#txt_CategoryID").val();
$(this).closest('.cart-item').find(".spanDefCat").text(newCatVal);
Here is the code that does what you want:
$(function(){
$("img").dblclick(function(){
$(this).parent().find(".spanDefCat").each(function(){
$(this).text("DefaultCat: 80");
});
});
});
Here is the working fiddle: http://jsfiddle.net/ZrA8E/
Thank you in advance for your help! It's my first post, wasn't sure about the formatting so I hope I've done it correctly.
I'd like to know if I can show/hide hidden Nested divs using the following script taken from http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm:
<script type="text/javascript">
function swapLyr(num) {
idCount=0
while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)
if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}
idCount++
}
}
</script>
<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li>
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>
<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>
I would like to use something like:
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
<a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
i see it know. use this:
<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
Show Hidden Div within this Div
<div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
el=document.getElementById("mydiv"+num);
if(el.style.display=="none"){
el.style.display="block";
}else{
el.style.display="none";
}
}
</script>