have used the following code to remove the style and id attributes from my html, but I would like them to come back once the visitor moves to another element. I'm fairly new to jQuery and have no idea how to achieve that. I would really appreciate somebody's help.
<div class="base" style="background-image: url(img/3.jpg);">
<div id="overlay"></div>
</div>
<script>
$('.base').hover(function(){
$(this).removeAttr('style').children().removeAttr('id');
}, function(){
$(this).addBack();
});
</script>
You have a wrong idea of what addBack() does, anyway the best here might be to use CSS classes.
Something like:
$('.base').hover(function(){
$(this).addClass('myClass');
}, function(){
$(this).removeClass('myClass');
});
Example
The part of the code where you remove the ID is irreversible, so I would find a alternative behaviour/solution there...
Something like this should work :
<div class="base" style="background-image: url(img/3.jpg);">
<div id="overlay"></div>
</div>
<script>
$('.base').hover(function(){
var $this = $(this);
$this.data('style', $this.attr('style')).removeAttr('style').children().each(function(){
var $this = $(this);
$this.data('id', $this.attr('id')).removeAttr('id');
});
}, function(){
var $this = $(this);
$this.attr('style',$this.data('style')).removeData('style').children().each(function(){
var $this = $(this);
$this.attr('id', $this.data('id')).removeData('id');
});
});
</script>
Basically we are storing attribute values in jQuery data arrays. I didn't test it but it should work, I've used this approach more than once..
Updated the code, and here is a working jsfiddle example
Related
In the HTML code there is a 'href' , is there any posiblity to wrap an A-tag() around it? I'm new to this so please don't be too harsh :)
Note that the jquery is there to find the 'href' of a child inside the div and setting that attritbute to .summary-item-wrapper
HTML:
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738"><div>
Jquery:
$(document).ready(function(){
$('body').wrapInner('<div id="support"></div>');
$('#support .sqs-block-summary-v2 .summary-item').each(function () {
var linkto = $(this).find('.summary-title a').attr('href');
$(this).children('.summary-item-wrapper').attr('href', linkto);
});
});
If there are multiple divs on your page you wish to convert, and to remove divs, but to keep all attributes, you can do something like this:
$( "div.summary-item-wrapper" ).each(function() {
$(this).before('<a href=http://'+$(this).attr('href') +'>A link');
$(this).prev().attr('id',$(this).attr('id'));
$(this).prev().addClass($(this).attr('class'));
});
$('div.summary-item-wrapper').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738">44444444444</div>
<div class="summary-item-wrapper" href="www.google.com" id="yui_3_17_2_4_1483527702805_33333">ttttttttttt</div>
What you want can be done with this:
$('#support .sqs-block-summary-v2 .summary-item-wrapper').wrap(function () {
return '';
});
Also href="google.no" means go to <currentdomain>/google.no, in case you need the google.no use href="https://google.no"
Check JSFiddle.
Please consider the comments on your question too.
I have a series of html contents called filters which is generated from database. The contents can change dynamically according to the page. I have given css IDs to each main div and appended a number with them while looping. Below is a sample snippet:
<div><a id="filter-1">Brands</a></div>
<div id="filter-op-1">This is option 1</div>
<div><a id="filter-2">Size</a></div>
<div id="filter-op-2">This is option 2</div>
<div><a id="filter-3">Color</a></div>
<div id="filter-op-3">This is option 3</div>
the ids filter-1 and filter-op-1 and so on are generated by the number of loops, so we dont know how much contents on the page will be generated for the filters.
I need to show/hide the filter-op-x contents by a click, so i wrote the following jQuery code:
$(document).ready(function () {
$('div a').click(function() {
var self = $(this);
var cssId = self.attr('id');
var child = $('div#filter-op-'+cssId);
child.toggle();
});
});
Now the problem is that it is not working in this way, but if i remove the cssId in js code and -1, -2 etc in html, it start working, but it is hiding all contents no matter which a i clicked.
I dont understant what is causing this issue. Anybody can explain this problem and give some good advice how to handle it?
JsFiddle is here
Thanks
You need to make some changes in your JS code like this:
$(document).ready(function () {
$('div a').click(function() {
var self = $(this);
var cssId = self.attr('id');
console.log(cssId); // This gives the `a` id.
var id = cssId.split("-")[1]; // Split and get the number part
console.log(id);
var child = $('div#filter-op-'+id); // append the number part here
child.toggle();
});
});
The fiddle: https://jsfiddle.net/sandenay/uk1Lquuh/1/
Problem found :
your cssId always return filter-1, filter-2, filter-3
and child become as 'div#filter-op-'+cssId) ==> 'div#filter-op-filter-1 which is produce wrong id of child div.
I have added extra data attribute
Here is my working code:
HTML :
<div><a id="filter-1" data="1">Brands</a></div>
<div id="filter-op-1">This is option 1</div>
<div><a id="filter-2" data="2">Size</a></div>
<div id="filter-op-2">This is option 2</div>
<div><a id="filter-3" data="3">Color</a></div>
<div id="filter-op-3">This is option 3</div>
JS :
$(document).ready(function () {
$('div a').click(function() {
var self = $(this);
var cssId = self.attr('data');
var child = $('div#filter-op-'+cssId);
child.toggle();
});
});
updated JSFIDDLE example
I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here
I have some jQuery code that is quite redundant. I want to refactor it to avoid to duplicate it for every 30 numbers. Each pin-Small ID has a pin-Big ID with the same number. I want to have a code that works for every ID with a higher number (#pin-Small2, #pin-Small3, #pin-Big2, #pin-Big3 and so on ...). It's written in CoffeeScript, but I provide it as a JS version also.
I don't find a start to iterate through these numbers. Can u help me? I would be very thankful if you'd do so, dont't mind if it's in JS or CS. Thanks so much in advance! :)
CoffeeScript
$('#pin-Small1').on
mouseenter: ->
$(#).hide()
$('#pin-Big1').addClass "enabled"
$('#pin-Big1').on
mouseleave: ->
$(#).removeClass "enabled"
$('#pin-Small1').show()
JavaScript
$('#pin-Small1').on({
mouseenter: function() {}
}, $(this).hide(), $('#pin-Big1').addClass("enabled"));
$('#pin-Big1').on({
mouseleave: function() {
$(this).removeClass("enabled");
return $('#pin-Small1').show();
}
});
Seeing your HTML may really help as it could change this answer, but assuming that your HTML looks something like this:
<div id="pin-Small1" class="small" data-related-big-pin="pin-Big1"></div>
<div id="pin-Small2" class="small" data-related-big-pin="pin-Big2"></div>
...
<div id="pin-Big1" class="big" data-related-small-pin="pin-Small1"></div>
<div id="pin-Big2" class="big" data-related-small-pin="pin-Small2"></div>
You could use data attributes like this:
$('.small').on
mouseenter: ->
$(#).hide()
var bigPinId = $(#).data("related-big-pin")
$('#' + bigPinId ).addClass "enabled"
$('.big').on
mouseleave: ->
$(#).removeClass "enabled"
var smallPinId = $(#).data("related-small-pin")
$('#' + smallPinId).show()
So we use classes to bind the mouseenter/mouseleave functions then read data attributes to find which elements they interact with.
Use CSS classes and related selectors... HTML:
<div id="pin-Small1" class="pin"></div>
<div id="pin-Small2" class="pin"></div>
<div id="pin-Small3" class="pin"></div>
jQuery:
$('.pin').each(function() {
// do something with each element, e.g. to hide them all:
$(this).hide();
});
I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.
I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?
jQuery/JavaScript
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html("+");
});
});
HTML
<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Thank you, anything relating to switching the inside text of an HTML element shall help. =)
How about adding a class that will let you know the expanded/collapsed status?
$(document).ready(function() {
$(".A1").click(function() {
var $this = $(this);
$(".P1").toggle("slow")
$this.toggleClass("expanded");
if ($this.hasClass("expanded")) {
$this.html("-");
} else {
$this.html("+");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Example: http://jsfiddle.net/sGxx4/
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
});
});
A bit of explanation: I'm setting $("#A1").html() with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.
However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:
$(document).ready(function() {
$(".A1").click(function() {
var $A1 = $(".A1");
$(".P1").toggle("slow");
$A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
});
});
There's no way to toggle content.
You could check if the $('.P1') is visible, then changing the +/- div according to that.
Something like :
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow", function(){
if($(this).is(':visible'))
$(".A1").html("-")
else
$(".A1").html("+")
});
});
});
Using a callback function (the second argument of the .toggle() method) to do the check will guarantee that you're checking after the animation is complete.
JsFiddle : http://jsfiddle.net/cy8uX/
more shorter version
$(document).ready(function() {
$(".A1").click(function() {
var $self = $(this);
$(".P1").toggle("slow", function ( ) {
$self.html( $self.html() == "-" ? "+" : "-");
});
})
});
Here's a way that uses class names on a parent and CSS rules and doesn't have to change the HTML content and works off a container and classes so you could have multiple ones of these in the same page with only this one piece of code:
HTML:
<div class="container expanded">
<div class="A1">
<span class="minus">-</span>
<span class="plus">+</span>
</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
</div>
CSS:
.expanded .plus {display:none;}
.collapsed .minus {display: none;}
Javascript:
$(document).ready(function() {
$(".A1").click(function() {
$(this).closest(".container")
.toggleClass("expanded collapsed")
.find(".P1").slideToggle("slow");
});
});
Working demo: http://jsfiddle.net/jfriend00/MSV4U/