I've being trying to implement a simple slider, but I wanted to have the title of my different div tags to be used as caption for each category of the product. But for some reason, the function only shows the title of the first div and doesn't chenge. How do I correct it?
Here's what I've added:
$('.next').click(function(){
$('#titlebox').text($('.room').attr('title'));
});
to the end of this script:
http://codepen.io/anon/pen/OVBvRO.
Basically, what I want to achieve is to insert a caption to a product (which is displayed) in a div above the slider. If there is an alternative to what I've tried, like getElementsbyID - please help me to write it too! As long as it gets the job done =)
Thanks in advance!
You can use the :nth-child() selector and pass in your currentIndex:
$('.next').click(function() {
$('#titlebox').text($('.room:nth-child('+currentIndex+')').attr('title'));
});
Note that :nth-child() starts with :nth-child(1). So you will want to use (currentIndex + 1) or have currentIndex a minimum value of 1.
Here is an example codepen, with the same functionality added to $('.prev').click to show that it works.
Try this one:
$('.demo').on('click', function(e) {
var title = $(items[currentIndex]).attr('title');
if ($(e.target).hasClass('next') && title) {
$('#titlebox').text(title);
}
});
http://codepen.io/godban/pen/QbZmxz
Related
I have found a way to display text on each of my empty slides. so far, so good. But at you can see in my codepen project, there's a can displaying on the first slide. Instead of the text 'Hello' on each of my slides, how do I display a loop of cans on each slide?
https://codepen.io/Rosstopherrr/pen/GVRvxJ
I had it like this thinking it will show all cans in each slide but it doesn't show any cans...
$('#products article').each(function() {
$(this).append(initApp())
});
what am I doing wrong?
$('#products article').each(function() {
$(this).append('hello')
});
EDIT - progress so far
so in the each.function(index) - I can add the index, and then in initApp(index) - I can add index. and then in the initApp function I can adjust so that bottle[index] gets selected and then added.
But nothing seems to work?? What am I doing wrong?
I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??
in initApp() you define const $container = getElement('.container'); getElement function calls document.querySelector(selector); that returns just the first element that matches the selector, in this case the first div with class .container in the first article tag. That's the first error.
In order to add a bottle to each container you need a list of .containers, that you can obtain with $containers = [...document.querySelectorAll('.container')]
once you have all .container you can integrate the forEach function call, maybe in this way
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
$containers[i].append($bottle)
});
it's possible that you will still not find the bottles like in the first item; that's because the single .bottle1, .bottle2, .bottle3 etc have wrong letf and top css properties; in addition, the .side divs miss the background-image property.
I'm looking for a way to fade from one piece of HTML in a div to another piece of HTML without fading out to white (to the background color of the div) first like i'm doing in this example:
The positionNumber variable is just an int with the number (e.g. 3).
function changeContent(positionNumber) {
$('.banner-content-wrapper').fadeOut('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().fadeIn(1000).html(contentHtml);
});
}
This example does the exact same by fading to white first but this is not what I'm lookig for:
Why doesn't jquery fadeIn() work with .html()?
I want to fade directly from one piece of HTML to another. I haven't been able to find any example on Stack Overflow that shows how to do exact that. I know this is not valid code but it's something like this I'm looking for:
$('.banner-content-wrapper').fadeToHtml(contentHtml);
How can I fade directly?
why use fadeOut/fadeIn - why not hide/show
function changeContent(positionNumber) {
$('.banner-content-wrapper').hide('fast', function() {
var contentHtml = $('.slidercontent#' + positionNumber).html();
$('.banner-content-wrapper').hide().html(contentHtml).show();
});
}
I have not tested this - just a suggestion based on the example you referenced
I don't think you should use fade. Try to use Replace.
http://api.jquery.com/replacewith/
I have designed a pop up style window, which has a title bar & content section. Inside, the content section I have put a button too. I am trying to change the background color of title bar. I have made two classes (title_bar & title_bar_hover) which contain background: linear-gradient(); property only.
As per the solution given in this stackoverflow thread I have wrote the following jquery. I have added jquery-ui plugin as well.
$('#start').on('hover',function(){
var target = $('.title_bar');
target.addClass(".title_bar_hover");
},5);
But this code is unable to perform anything. However, here is the sample jsfiddle.
So please suggest some way(s) to achieve this functionality.
Thank you so much!
You need to:
1) Include jQuery in your jsFiddle demo
2) Use .hover() instead of .on('hover',...
3) Use .toggleClass() instead of .addClass()
4) Correct the class name as title_bar_hover in your CSS
$('#start').hover(function () {
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
Updated Fiddle
you can do this way:
$('#start').on('mouseover',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
$('#start').on('mouseout',function(){
var target = $('.title_bar');
target.toggleClass("title_bar_hover");
});
FIDDLE EXAMPLE
With this you can toggle the class easily on hover.
$('.title_bar').hover(function(){
$('.title_bar').toggleClass('title_bar_hover');
}, function(){
$('.title_bar').toggleClass('title_bar_hover');
});
Hope its useful to you :)
JSBIN demo
I am trying to hide and show different div's depending on which radio you select. Unfortunately I could not come up with working solution so far. Here is my starting code http://jsbin.com/edokef/1/edit
Maybe someone could suggest how to achieve that? I was thinking about getting the index of each radio but each radio is inside separate div wrap and in that case the index is always 0.
Thank you for any idea.
Demo: http://jsbin.com/edokef/7/edit
Code:
options.click(function(){
var id = "opt" + $(this).val();
$(".optDivs").hide();
$("#" + id).show();
});
Plus, each div that should be shown has a class now (optDivs)
You can use toggle() to show or hide based on div based on radio button
var options = $('#options').find('input');
options.click(function(){
$("#"+$(this).parent().attr('class')).toggle();
});
})();
DEMO
Sorry for not providing You with a full solution.
1) Why do You want to use indexes? Every radio has a value. Use that instead.
2) "to hide and show different div's depending on which radio you select" sounds to me at least like one to many relationship. I recommend using publisher/subscriber for this task. There are many usable implementations of this pattern eg. https://github.com/federico-lox/pubsub.js
PS Try to avoid pubsub implementations based on jQuery (they manipulate on DOM and and are kinda slow)
may be this can help you
$(function(){
(function(){
var options = $('#options').find('input');
options.click(function(){
if($(this).is(':checked'))
{
$('#' + $(this).parent().attr('class')).show();
}
else
{
$('#' + $(this).parent().attr('class')).hide();
}
});
})();
});
DEMO
This will work:
<script>
$(function(){
(function(){
var options = $('#options').find('input');
$(options).click(function(){
$('#opt1, #opt2, #opt3').hide();
$('#' + $(this).parent().attr('class')).show();
});
})();
});
</script>
I've recently discovered a website which does something really cool! Example:
There are two links "Cat" and "Dog".
There are two DIV containers, id="catImage" and id="dogImage"
The initial URL looks like http://mysite.com/#cat
Initially, the cat image is visible
Clicking on the Dog link will fade out the catImage div and fade in the dogImage div
Additionally, it will change the anchor in the browser URL to: http://mysite.com/#dog
Opening the website with httü://mysite.com/#dog will show the dog image initially
Is this possible using jQuery? How would I scan for that anchor, and how would I call a function when the link is clicked without causing the link to follow some URL? I'm an objective-c dude and don't know anything about JS... hope my question isn't too dumb for you.
with this markup:
<div id="images">
<div id="catImage">some cat image here</div>
<div id="dogImage" style="display:none;">some dog image here</div>
</div>
<div id="anchors">
catImage anchor
dogImage anchor
</div>
and with this js (assuming jquery 1.4.x)
$(function () {
$("#anchors a").click(function () {
// send the index of the anchor to the function
fadeImage($(this).index());
});
var hash = window.location.hash;
if (hash) {
var elementId = "#" + hash.substring(1) + 'Image';
var $div = $(elementId);
// check if this element exists, and if so, send that index to the function
if ($div.length) {
fadeImage($div.index());
}
}
});
function fadeImage(index) {
$("#images div:eq(" + index + ")").fadeIn().siblings().fadeOut();
}
And to explain what's going on here:
I'm using the jquery index() function to get the index of the element relative to its siblings. I then pass that index to the fadeImage function, which finds the same index div and fades it in. By using chaining, I then look to the siblings of that div to fade them out. This is useful if you have more than 2 divs to fade out here.
For the anchor/hash usage, I just find the div with the matching id and get its index, and pass it to the same function.
jQuery docs can explain the various methods much better than I can.
Using location.href you can get the full URL in javascript.
you can substring or string replace your domain name and rest will be your parameter dog or cat.
When you have the parameter .
jquery functions like show(); hide (); to show cat and hide dog.
By adding or removing style also you can change images
.add() is there
addClass removeClass is there
http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z
http://rockmanx.wordpress.com/2008/10/03/get-url-parameters-using-javascript/
http://api.jquery.com/show/
http://api.jquery.com/addClass/
Update: Oh I forgot, obviously you should read a tutorial about jQuery if you want to use it.
You can get and set the hash of the URL via window.location.hash, e.g.
alert(window.location.hash);
//and
window.location.hash = 'test'
You should read about events in order to fully understand how it works. The event object provides a preventDefault() method, which is exactly doing what it says (preventing the default behavior).
E.g. with jQuery:
$('a').click(function(e) {
//Do something..
// prevent to follow the link
e.preventDefault();
});