So, it has been a while since I've had to do anything jquery and I'm having trouble recalling the simplest of tasks.
I have a DIV with a default image in it and I want that to change that image when I click an LI link on the page.
My question is, what does my jquery look like if I want to click 'view brown' and have it replace the default 'lboard-black' image and so forth.
All I've really accomplished in trying to remember the syntax is show hide and toggling; Its similar to an image gallery type script I guess but much much simpler.
<style>
.lactive{display:block;}
</style>
Image Container:
<div id="StuffandThings">
<div id="lboard-black" style="display:none;" class="lactive"><img src="" /></div>
<div id="lboard-brown" style="display:none;"><img src="" /></div>
<div id="lboard-grey" style="display:none;"><img src="" /></div>
</div>
Link Container:
<ul>
<li><div class="lblack">view black</div></li>
<li><div class="lbrown">view brown</div></li>
<li><div class="lgrey">view grey</div></li>
</ul>
This is what i tried working with initially:
http://jsfiddle.net/wsfy5uo2/
The Jquery click method would do. https://api.jquery.com/click/
Going by your code
Something similar to the following might work, but you may consider using element IDs instead
$(".lblack").click(function(){
$("#StuffandThings div").hide();
$("#lboard-black").show();
});
$(".lbrown").click(function(){
$("#StuffandThings div").hide();
$("#lboard-brown").show();
});
$(".lgrey").click(function(){
$("#StuffandThings div").hide();
$("#lboard-grey").show();
});
See the fiddle
https://jsfiddle.net/Ldtosmnx/
Update:
There are some problems with your fiddle
You've passed .link instead of .lboard-link as the selector
You haven't assigned any IDs to your elements in the first place
See this fiddle for corrections http://jsfiddle.net/kw1rgv23/
Your click event was on wrong class. It should be .lboard-link not .link. And also use this instead of e.target to get the data-foil instead of id.
$(document).ready(function () {
$('.lboard-link').on('click', function (e) {
e.preventDefault();
var id = $(this).data('foil').toLowerCase();
$('.lboard-hide').hide();
console.log(id);
$('#' + id + '-lboard').show();
});
});
.lboard-hide:not(:first-child){display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuffandthings">
<div id="black-lboard" class="lboard-hide">1111</div>
<div id="brown-lboard" class="lboard-hide">2222</div>
<div id="grey-lboard" class="lboard-hide">3333</div>
</div>
<ul>
<li><div data-foil="Black" style="background-color: #000000;" class="lboard-link"> </div></li>
<li><div data-foil="Brown" style="background-color: #8B4513;" class="lboard-link"> </div></li>
<li><div data-foil="Grey" style="background-color: #cccccc;" class="lboard-link"> </div></li>
</ul>
You can also test it here.
Related
I am trying to get the data-position value using jquery on link click. Here is my code
<div class="dfd-article-tile-wrapper tile-position-6">
<div id="f_54ae4352d493b83429617a69" data-position="5" class="dfd-item tile">
<a class="dfd-item-wrap cxense" target="_blank" href="#">
<div class="imageholder">
<img src="#" alt="Depresjon - en oversikt " style="background-image: url(image.png);">
<div class="shader" style="">
<h2 class="dfd-tile-header">Hello World </h2>
<span class="source">xyz.com</span>
</div>
</div>
</a>
</div>
</div>
What I have tried so far to code this jquery code but it is not working;
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".dfd-item-wrap").click(function(event) {
var text = $(this).parents(".dfd-item").find('data-position').value
alert(text);
});
});
</script>
This is the jsfiddle link
http://jsfiddle.net/nt7243s6/
Need help and guidance. Thank you
You need to use .data() instead of .find() to get data attribute value. also use .closest(.dfd-item) or .parent() instead of .parents():
var text = $(this).closest(".dfd-item").data('position');
Complete Code:
$(".dfd-item-wrap").click(function(event) {
event.preventDefault();
var text = $(this).closest(".dfd-item").data('position');
alert(text);
});
Working Demo
The way you should access your data attributes is simply by data('position');
http://jsfiddle.net/nt7243s6/2/
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
My markup is as follows:
<li class="item">
<div class="quickview-btn" data-pid="147" style="opacity: 0;">Quick View</div>
<a class="product-image" title="xyz" href="http://def.com/xyz"><img alt="xyz" src="http://def.com/asdf">xyz</a>
<h2 class="product-name"><a title="xyz" href="http://def.com/xyz">22" Syncmaster LCD Monitor</a></h2>
<div class="price-box">something</div>
</li>
<li class="item">
<div class="quickview-btn" data-pid="163" style="opacity: 0;">Quick View</div>
<a class="product-image" title="abc" href="http://def.com/abc"><img alt="abc" src="http://def.com/ghjk">abc</a>
<h2 class="product-name"><a title="abc" href="http://def.com/abc">Another Product</a></h2>
<div class="price-box">something</div>
</li>
I want to get the data-pid value of the second quickview-btn div on clicking the first quickview-btn div.
I used the .parent(), .next(), and .closest() methods in jQuery, but I'm not able to get it.
I tried:
$(this).parent('.item').next('.item').next('.quickview-btn').data('pid');
$(this).parent('.item').next('.item').child('.quickview-btn').data('pid');
$(this).parent('.item').next('.item').closest('.quickview-btn').data('pid');
but none of them worked for me.
$(this).parent('.item').next('.item').hide(); //this works
$('.quickview-btn').on('click',function(){
var pid = $(this).closest('.item').next('.item').find('.quickview-btn').data('pid');
})
Demo ----> http://jsfiddle.net/qSe6t/4/
Try
$('li.item').closest('.item').find('.quickview-btn').data('pid');
For direct access on load you can use this way. This is not recommended but one of the ways.
$("li:nth-child(2) .quickview-btn").data('pid');
Try the following:
$('.quickview-btn').on('click',function(){
var pid = $(this).parent().next().find('.quickview-btn').attr('data-pid');
});
You could simplify your code in addition to using the proper selectors, as follows:
$('li:first-child').find('.quickview-btn').on('click', function () {
var nextData = $(this).parent().next().children('.quickview-btn').data('pid');
console.log(nextData);
});
Demo
I have a code that goes like this on HTML:
<div class="blog_highlight">
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<ul class="commentaries">
<li>16</li>
</ul>
<div class="entry_info">
<div>
<img src="images/blog_pix_1.jpg" width="230" height="210" alt="" />
</div>
<h2>Title</h2>
<p>Text</p>
<p>Leer mas</p>
</div><!-- end entry info -->
</div><!-- end blog highlight -->
I would like to achieve that on hover on the UL (with classes calendar and commentaries), the border color for div.entry_info and background of a.read_more changes via jQuery. This is what I have however the second one isn't working.
<script>
$(document).ready(function(){
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('a.read_more').removeClass('read_more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});
});
</script>
My current issue is that everything except the second line works.
This is the line with the issue:
$(this).nextAll('a.read_more').addClass('more_jquery');
I am fairly new to jQuery and have tried siblings and next and everything but it won't work. I tried with eq(0) which worked but how do I loop it? The reason I go with classes and not ID is because this is a box that gets repeated multiple times.
Thank you for you help.
Why not simply use CSS?
ul.calendar:hover ~ .entry_info {
// selects all .entry_info's which are on the same level (siblings) as the ul.calender which is hovered over
}
BTW I'm sure that jQuery's magic $-function also supports the general sibling combinator, so $("item ~ sibling") should work just fine:
$("...").hover(function() {
$("... ~ siblings");
}
See:
http://www.w3.org/TR/selectors/#sibling-combinators (selectors CSS 3)
http://api.jquery.com/category/selectors/ (selectors CSS 1 - 3 are supported)
It does not work because nextAll gets all siblings based on the selector. Your hyperlink is not a sibling. Instead you can use find to search entry_info for the link.
http://jsfiddle.net/U7hNS/
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<div class="entry_info">
<p>Leer mas</p> <!-- NOT A SIBLING! -->
</div>
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});
This seems like it should be easy. I have a html snippet that I wish to locate and modify in place via javascript. But not just the innerHTML; I want to replace the entire element. Example:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" onclick="javascript:doSomethingUseful(##);">Do ##!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
After page load, I want to grab the <a class="clicker" ...>Now!</a> and replace it with three instances like:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" onclick="javascript:doSomethingUseful(1);">Do 1!</a>
<a class="clicker" onclick="javascript:doSomethingUseful(2);">Do 2!</a>
<a class="clicker" onclick="javascript:doSomethingUseful(3);">Do 3!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
Using prototype.js, I can easily do $$('.clicker') and get an array with the element. I can use .innerHTML and get the 'Do ##!' and change it. But I want, nay, need the entire element to insert it in place. I can go through weird machinations of siblings and parent, and walk back around the nodes to eventually get what I need, and I will do that. It just seems that I am missing something here that would make this easy.
If it is not the only HTML generation you want to run in your page, you may consider a javascript templating engine.
There are several advantages, the main one being a clear cut between the HTML view and the JS logic.
There are plenty of these engines available for every taste.
Here is how it would look with prototype.js and the PURE template engine:
$$('div.content')[0].render([1,2,3], {
'a.clicker':{
'id <-':{
'.':'Do #{id}!',
'#onclick':'javascript:doSomethingUseful(#{id});'
}
}
});
In IE you can set outerHTML. In FF, you can use this:
http://snipplr.com/view/5460/outerhtml-in-firefox/
So the way I would do this is:
Iterate over all the anchors with class clicker that are inside a div with class item which are inside class content
To each one, add a function which will hide that anchor, and then append the 3 anchors you want
So here's what my html chunk looks like:
<div class="content">
<div class="item">
<img src="images/pic1.jpg" />
<a class="clicker" href='#'>Do ##!</a>
<h3>title</h3>
<p>description</p>
</div>
</div>
And I need to include Prototype:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
And a variable to hold your replacement html, and a dummy function so what we insert works:
var myReplacementHtml = '<a class="clicker" onclick="doSomethingUseful(1);" href="#">Do 1!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(2);" href="#">Do 2!</a>';
myReplacementHtml += ' <a class="clicker" onclick="doSomethingUseful(3);" href="#">Do 3!</a>';
function doSomethingUseful(n) {
alert(n);
return false;
}
Then here's my code, you may find it useful to get the backstory on how these work: $$, Element.observe, Element.hide, Element.insert, Event.stop:
<script type="text/javascript">
Event.observe(window, 'load', function(){
$$('.content .item a.clicker').each(function(item){
item.observe('click', function(evt){
item.hide();
Element.insert(item, {after: myReplacementHtml});
});
Event.stop(evt);
});
});
</script>
You can add and append elements.
function doSomethingUseful(val) {
var ele = document.getElementById('myDiv');
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
}