I am trying to apply a hide effect on all ID's with the same label, but it only works on the first one. I am having the same problem when I tried to add slideToggle too, but figured solving this will solve the others.
JQUERY
var allPanels = $('#accordionSlide');
allPanels.hide();
CSS
#accordion {
display: block;
width: 100%;
overflow: hidden;
}
#accordionBtn { display: block; }
#accordionSlide { display: block;}
HTML
<div id="accordion">
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
</div>
Use class attribute as id should be unique for every element. id represents only one element that's why it should be unique. So when you apply selector it only selects the first element that it founds on the page.
do like this:
<div class="accordionSlide">
Wireless Remote Monitoring
</div>
and jquery:
var allPanels = $('.accordionSlide');
allPanels.hide();
jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information.
ID Selector (“#id”)-->Selects a single element with the given id attribute.
if you want to apply to all elements then use class in place of id
var allPanels = $('.accordionSlide');
allPanels.hide();
html
<div class="accordionSlide"></div>
Related
I am required to use a specific plugin in Wordpress for a project. It outputs several DIVs, each with identical IDs.
However, I need to isolate them individually, so that I style them in CSS separately.
Normally I would either alter the PHP or use nth-child...but this plugin basically makes both of these options impossible...long (and frustrating) story.
So I am looking for a Javascript/jQuery solution that I can plug into a global .js file and execute using a $(document).ready statement after page load instead.
I just can't seem to figure it out. The js/jquery code would need to alter the html output by this plugin after it's finished loading. It would scan the page, locate each instance of #commonName, and append a number onto it OR add a class name to it. Doesn't matter how it's done, as long as each DIV becomes unique in name.
The plugin outputs something like this on the page (simplified):
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
I would like my Javascript or jQuery code to locate and change every instance of this ID, and turn it into this:
<div id="commonName" class="copy-1"></div>
<div id="commonName" class="copy-2"></div>
<div id="commonName" class="copy-3"></div>
Or this would be fine too:
<div id="commonName-1"></div>
<div id="commonName-2"></div>
<div id="commonName-3"></div>
Thanks for your help everyone!
This will take all of the ids that have the id value of commonName
The using an each loop, we can change the id value using the attr function.
Hope this helps :>
$("[id='commonName']").each((i,el)=>$(el).attr('id','commonName-'+i))
console.log($("body").children())
body div {
width: 50px;
height: 50px;
display: inline-block;
}
#commonName-0{
background: red;
}
#commonName-1{
background: green;
}
#commonName-2{
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="commonName"></div>
<div id="commonName"></div>
<div id="commonName"></div>
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I can't quite get my head around this. I have the following construct:
<div class="container">
for n = 0 to ...
Link n
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
And an example could be:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
Now the hurdle, I am trying to show the .poptip on hover on the anchor tag, and this obviously works fine if there is one link (which is usually the case). In any case where there's >1 link, then the last one will work. Current css (sass style) which doesn't quite work in >1 cases:
.producttooltip {
position: relative;
}
.producttooltip a:hover + div {
display: block;
}
I cannot change the structure of the html, it will always be container > all links followed by all poptips. I can however mark the poptips and anchor tags up with unique identifiers e.g. Link 1<div class="poptip" rel="identifier"></div>, but I can't quite figure out if I in css can create a general selector which goes (pseudo):
a:hover + div[rel=a.rel] {
display: block
}
So my question is, can I get this construct marked up in pure CSS, or do I have to use some JS trickery (which I can, but I would really prefer CSS). Hope one of you guys are more clever than me.
Edit: just gonna clarify - I cannot change the structure of the html. The neatest solution would obviously be to wrap each element with it's equivalent poptip, but my entire conundrum is the fact that I cannot do this.
In your case, you can do this way:
$('a').on('hover', function() {
$('.poptip').eq($(this).index()).show();
}, function() {
$('.poptip:visible').hide();
});
It is tough to do this with CSS alone. But even then, I have provided a CSS solution below. Do have a look if you wanna consider a CSS only solution.
You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.
Hover Me!
Next should be the tool tip. We can have a <span> for now and put it inside the link.
Hover Me!<span class="tooltip">Hello, World!</span>
Now comes the real CSS part.
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Snippet
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Hover Me!<span class="tooltip">Hello, World!</span>
This is just one of a pure CSS solution. You can see the working fiddle here.
However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:
jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS
jQuery solution
You can use mouseenter/mouseleave event in order to show up the desired elements
$('a').on('mouseenter', function() {
var i = $(this).index();
$('.poptip').eq(i).show();
}).on('mouseleave', function() {
$('.poptip').hide();
});
.poptip {
width:100%;
float:left;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">Some content related to link 2 retreived with ajax</div>
<div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>
Using jquery this can be achieved easily, just need to get the index of the current anchor element & display the respective div present at the index location.
HTML CODE:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
JS CODE:
$(function(){
$('a').on('hover',function(){
var ind = $('a').index(this);
$('.poptip').eq(ind).css('display','block');
});
});
Live Demo # JSFiddle
If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
i've heard using multiple id attributes is very bad practice but what confuses me is what if the elements are nested like this...
<div id="slideshow1" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
i've made an example with js here and everything seems to work fine..
http://jsfiddle.net/6YPsX/
if they were nested within the same element then unique id's would make sense but do ID's really need to be unique to the whole document?
An ID is more than just a way of finding an element, there are other things associated with an ID. The following link should be helpful and provide a greater insight into this. Here are the main points:
The id attribute has several roles in HTML:
As a style sheet selector. As a target anchor for hypertext links.
As a means to reference a particular element from a script.
As the name of a declared OBJECT element.
For general purpose processing by user
agents (e.g. for identifying fields when extracting data from HTML
pages into a database, translating HTML documents into other formats,
etc.).
link to w3 site
You can have multiple classes on the same element
<div id="slideshow1" class="slideshow">
<div class="slideshow-arrow left"></div>
<div class="slideshow-arrow right"></div>
</div>
CSS
.slideshow-arrow {
background: none top left no-repeat;
width: 20px;
height: 20px;
}
.slideshow-arrow.left {
background-image: url('...');
}
.slideshow-arrow.right {
background-image: url('...');
}
It is a bad practice it won't pass W3C validation and it get's even worse when you try to implement JavaScript. Just use a class name instead or give them different id names.