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");
Related
Ok I have different sections for my homepage.
This is the code of the menu bar:
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">Home</li>
<li>Services</li>
<li>About Digm</li>
<li>Contact Us</li>
<li><b>FREE Audit</b></li>
</ul>
</div>
These work fine as far as going to the sections I need them to is concerned.
But I also have buttons wrapped in DIV elements for a slideshow. The buttons work if I make them external links to leave my site, but they won't let me use them to go to the same sections I can go to with the menu bar links.
These are the DIVs with the buttons:
<div id="ubea-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>It's time to shift strategies.</h2>
<p>FREE Audit</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Experience The Butterfly<br />Effect</h2>
<p>Read More</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Ready? Book A Consultation</h2>
<p>Why Wait?</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
The code I have for 1 the sections looks like this:
<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="ubea-container">
<div class="row text-center">
<div class="display-t">
<div class="display-tc">
<div class="col-md-12">
<h3>If you have inquiries please email us at <b>info#blahblahblah.com</b></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone see why the buttons won't scroll to the sections?
Anchor elements href property does that by default. Simply give the target element the id attribute matching the href="#introduction" on the menu anchor.
<div>
<ul>
<li>Intro</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="intro">Intro</h4>
<p>Foo bar.</p>
What does your CSS look like?
You could always use JavaScript:
// we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
// select the target slide
var slide = document.getElementById("slide_1");
// show the target slide
slide.style.display = "block";
// hide the slides siblings
forEach.call(slide.parentNode.children, function(s) {
// NOTE: don't hide the target slide!
if(s !== slide) {
s.style.display = none;
}
});
});
Or if you prefer, you could just use jQuery:
$("#button_id").on("click", function() {
$(this).show().siblings().hide();
});
Also, avoid using so many div's, try to use semantic tags instead.
Too many div's will make your code hard to maintain and the overuse of the div tag can lead to a div soup, which can be horrible to maintain.
Good luck.
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
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>