I have a code where the button and title are in same div container like this:
<div class="cmpl-teaserd__content">
<div class="cmpl-teaserd__pretitle">Featured Sample Title</div>
<div class="cmpl-teaserd__title wow animated" style="visibility: visible;">
<h2><b>Borcher</b> <span style="font-weight: normal;">Collection</span></h2>
</div>
<div class="cmpl-teaserd__description">
<p>Sample text Sample text Sample text Sample text</p>
</div>
<div class="cmpl-teaserd__action-container">
<a class="cmpl-teaserd__action-link" href="#.html" target="_self" title="">View Collection</a>
</div>
Am using the Code like this:
$(document).on("click","a.cmpl-teaserd__action-link",function(){
console.log("Title:" + $(this).text() + " Link Clicked");
});
Requirement:
I want to get the Title1(div.cmpl-teaserd__pretitle) & Title2(div.cmpl-teaserd__title wow animated) of the container once the link(a.cmpl-teaserd__action-link) got clicked.
Kindly provide your feedback to get the value
You can loop through all the divs inside the selected div and then maintain a counter to print just the div you want to print. It can be better implemented.
this might help.
$(document).on("click","a.cmpl-teaserd__action-link",function(){
var count = 1;
$('div.cmpl-teaserd__content div').each (function (count) {
count++;
if(count<3){
console.log("Title"+count +" "+ $(this).attr('class'));
}
});
});
Related
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});
I'm making a site with video backgrounds that are preloaded so all my content needs to be on the same page. I have a div with my first section in it as "slide1" for example. I need to remove this div and replace it with "slide2" on a button click. I've tried using javascript to load "slide2"s html in on the click but the code I've tried just writes the div to a white page with no styling. I need it to be loaded inside my content div with the appropriate stylings in place.
my html code:
<script src="assets/js/introduction.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="slide1">
<p>Here is the first trigger. It should look something like this</p>
<p><input type="button" onclick="part2()" value="Click Me!" /></p>
</div>
</div>
the javascript file with the content:
function part2() {
document.write('\
<div id="slide2">\
<p>Here is the second trigger. It should be to the left</p>\
<p>next line goes here</p>\
</div>'
);
}
I've been stuck on this for days and it's driving me insane. Any help would be great
Why don't you just create all the slides in the html and hide all of them except slide 1?
Then when they click the button hide slide 1 and show slide 2. Something like this
<div id="content">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
</div>
Next
JS
$(function(){
var currentSlide = 0;
$(".slide").hide();
$(".slide:eq(0)").show();
$("#next-button").on("click",function(e){
e.preventDefault();
$(".slide:eq(" + currentSlide + ")").hide();
if(currentSlide == $(".slide").length - 1){
currentSlide = 0;
}else{
currentSlide++;
}
$(".slide:eq("+ currentSlide +")").show();
});
});
http://jsfiddle.net/cNTgQ/1/
If you are okay with JQuery try using .replaceWith()
See the official page for more info.
you can use this:
function part2() {
var html = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
//here you append the slide2;
$('#content').append(html);
//here you remove it
$('#slide1').remove();
}
Like the other guy said, try using replaceWith() from jQuery, here's your function:
function part2() {
var content = '<div id="slide2"><p>Here is the second trigger. It should be to the left</p><p>next line goes here</p></div>';
$('#slide1').hide().replaceWith(content).show();
}
I wish to display certain divs inside a main div dependent on which image is clicked. With out any decent knoweldge of Js or Jquery, I fail to do this without some assistance.
<form>
<input type="hidden" name="prod">
<div id="images">
<img id="one" src="http://lorempixel.com/200/200/">
<img id="two" src="http://lorempixel.com/201/200/ ">
<img id="three" src="http://lorempixel.com/203/200/ ">
<img id="four" src="http://lorempixel.com/204/200/ ">
</div>
</form>
<div id="description">
</div>
<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>
If the image which has id="one" is clicked, then display <div class="one">Brilliant</div> inside of the description div. Then ofcause if the second image is clicked, then display the the 'super' div inside the description div. I'd like to not have the descriptions visible until clicked, and only one div at a time to be shown.
The images are apart of a form because I need to forward the value of the id on the images to a variable.
Here is the script that does that.
$('#images').delegate('img', 'click', function () {
var $this = $(this);
// Clear formatting
$('#images img').removeClass('border-highlight');
// Highlight with coloured border
$this.addClass('border-highlight');
// Changes the value of the form field prod to the file name shown in the image.
$('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));
//Alert for debugging simplicity
alert($('[name="prod"]').val());
});
Perhaps a function can be implemented into the current script?
Here is a fiddle, and it will all make sense of what I have as a whole currently.
Check out this fidde
You just need to add:
$('#description').html($('.' + $this.attr('id')).html());
At the bottom of your onclick function.
** You have a typo on the 3rd div with text(tree instead of three).
You can make it bit simple by adding the divs for description in div as I see no need to put the divs for description outside the description div and later adding it. You will need to hide all the divs we have in description div and show the one that is related to img being clicked.
Live Demo
Html
<input type="hidden" name="prod">
<div id="images">
<img id="imgone" src="http://lorempixel.com/200/200" />
<img id="imgtwo" src="http://lorempixel.com/201/200" />
<img id="imgthree" src="http://lorempixel.com/203/200" />
<img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
<div id="one">Brilliant</div>
<div id="two">Super</div>
<div id="three">Amazing</div>
<div id="four">Excellent</div>
</div>
Javascript
$('#images').delegate('img', 'click', function () {
$('#description div').hide();
$('#' + this.id.replace('img', '')).show();
});
I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.
Basically, all I am looking to do is have 4 blocks of content wrapped in div and then have each one of those correspond to an image and change the image when click on the div. I know this should be really simple, but I have a limited knowledge of jquery, mostly rely on plugins. I don't want to change the info divs to a link if possible. Thanks
Here is my current markup; using foundation grid
<div class="feature-one row clearfix">
<div class="three columns">
<span class="twelve columns activities-1">
<p class="marker"> Title of Service</p>
<p>Longer description of services</p>
</span>
<span class="twelve columns activities-2">
<p class="marker"> Title of Service</p>
<p>Longer description of services</p>
</span>
</div>
<div class="six columns" >
<img id="activities-1" src="screenshot.jpg"/>
<img id="activities-2" src="screenshot.jpg"/>
<img id="activities-3" src="screenshot.jpg"/>
</div>
<div class="three columns">
<span class="twelve columns activities-3">
<p class="marker"> Title of Service</p>
<p>Longer description of services</p>
</span>
</div>
</div>
Thank you so much for the help!
UPDATE:Here is the final of what I have; I am sure it's not perfect and can probably be more concise, but I hope it helps anyone looking. For anyone who wants to clean it up, perhaps make it work with hoverIntent I welcome your additions
$('.feature-one img').each( function() {
$(this).hide().filter(":first-child").show();;
});
$('.feature-one span').on('hover click', function() {
var sName = $(this).attr('id');
$('img#' + sName).fadeIn(800);
$('.feature-one img').not($('img#' + sName)).fadeOut(800);
}
);
Working fiddle link.
$(document).ready( function() {
$('img').hide();
$('span').on('click', function() {
var sName = $(this).attr('id');
$('img#' + sName).toggle(800);
});
});
I've added the property id to each of the span element, as you can see on the fiddle link.