I want to make a scroll to the corresponding .cinematography_box when I click on a item on the list of the sidebar, I have with this markup:
It would be like, first item on the list > goto > first .cinematography_box div and so on on the second, third and etc
What would be the best way to achieve this?
<div id="sidebar" class="clearfix">
<ul>
<li>
<a id="aboutlink" href="javascript:void(0)" >CINEMATOGRAPHY LIST</a>
</li>
<li>
FIRST ITEM
</li>
<li>
SECOND ITEM
</li>
<li>
THIR ITEM
</li>
</ul>
</div>
<div id="gallery" class="cinematography clearfix">
<div class="cinematography_box clearfix">
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="cinematography_box clearfix">
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="cinematography_box clearfix" >
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
Define each element like that:
<li data-target="one">
THIR ITEM
</li>
<div class="cinematography_info" data-pos="one">
<p>Lorem Ipsum</p>
</div>
And using jQuery you could do this:
$(document).ready(function(){
$("li").click(function() {
scrollTo($(this).attr("data-target"));
});
});
function scrollTo(target){
var tagScroll = $(".cinematography_info[data-pos='"+ target+"']");
$('html,body').animate({scrollTop: tagScroll .offset().top},'slow');
}
See the example that i've made:
http://jsfiddle.net/NfwEv/9/
First, give your three div tags ID's, say item1, item2, item3.
That way, you can change your a tags to be:
<li>
FIRST ITEM
</li>
<li>
SECOND ITEM
</li>
<li>
THIR ITEM
</li>
Related
I want from among the boxes that I have placed in the code below; Select the box whose z-index is equal to 3 and make its background red and the title white to distinguish it from other boxes.
html:
<ul>
<li class="post1">
<div class="content">
<h4 class="title">title post1</h4>
</div>
</li>
<li class="post2">
<div class="content">
<h4 class="title">title post2</h4>
</div>
</li>
<li class="post3">
<div class="content">
<h4 class="title">title post3</h4>
</div>
</li>
<li class="post4">
<div class="content">
<h4 class="title">title post4</h4>
</div>
</li>
<li class="post5">
<div class="content">
<h4 class="title">title post5</h4>
</div>
</li>
</ul>
For this purpose, I wrote a script code that does not work properly.
That is, the background of the box becomes red, but the color of the title does not change:
script:
$("li").each(function (index) {
if ($(this).css("z-index") == 3) {
$(this).css("background-color","red");
$(this).children(".title").css("color","white");
}
});
The issue may be with children, try using find.
$(this).find(".title").css("color","white");
I have html file that contains code like :
<ol class='items'>
<li class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
<div class="itemImg">
<img src='Image src' />
</div>
</div>
</li>
<li class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
....
</ol>
The JQuery:
var file = 'index.html';
$.get(
file,
function (data) {
const html = $(data),
item = html.find('li.item'),
title = item.find('p.title'),
text = item.find('div.text'),
img = item.find('div.itemImg');
$('.fetchedItem').html(item[0]);
$('.fetchedimg').html(img[0]);
if(img[0]){
//Do Something
}
}
);
I want to get the last li with class item , Also for the if statement , Sometimes there is a div with class itemImg and sometimes not , So I want to check if this div exist in the first li with class item or not.
You can use ':last' and ':first' to target the first/last divs with class "item".
Note that I use lastItem[0] -- this is because the code $('li.item:last') returns a jQuery object, and to get the actual element you need to use [0]
$('#myButt').click(function(){
//Get last div with class "item"
var lastItem = $('li.item:last');
alert(lastItem[0].id);
//Does a div exist under 1st .item with class .itemImg
if ($('li.item:first').find('.itemImg').length) alert('Yes it exists');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='items'>
<li id="li_1" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
<div class="itemImg">
<img src='Image src' />
</div>
</div>
</li>
<li id="li_2" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
<li id="li_3" class='item'>
<div class='content'>
<p class='title'>
Item Title
</p>
<div class="text">
Item Description
</div>
</div>
</li>
<button id="myButt">CLick Me</button>
</ol>
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>
The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');
You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.
Hi everyone i am trying to make a jquery tab but i want to use it multiple like for example in one page have 100 tab what can i do on that time.
I am trying in this DEMO link. If you click one blue button then you can see the tab. Click the red buttons like STARKS button then other tab also doesn't work. Anyone can help me here ?
<div class="icon_c">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
<div class="icon_b">
<div class="clickficon"></div>
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel" class="panel pactive">
a
</div>
<div id="lannisters-panel" class="panel">
b
</div>
<div id="targaryens-panel" class="panel">
c
</div>
</div>
</div>
</div>
You have 2 issues.
The 1st is on the initTabs_ function.
It takes all the .panel divs for both MaterialTabs, it should take only the ones that are childs of the MaterialTabs element.
You should replace:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = document.querySelectorAll('.panel');
For:
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.tab');
this.panels_ = this.element_.querySelectorAll('.panel');
The seccond issue is with the tabs ids and href srcs in both panels references to the same ids, if you change the second panel as follows:
<div class="emicon-menu MaterialTabs">
<ul>
<li class="tab active">Starks</li>
<li class="tab">Lannisters</li>
<li class="tab">Targaryens<span></span></li>
</ul>
<div class="panels">
<div id="starks-panel1" class="panel pactive">
a
</div>
<div id="lannisters-panel1" class="panel">
b
</div>
<div id="targaryens-panel1" class="panel">
c
</div>
</div>
</div>
It should work independently of the first one.
You can found the code modified here