I have a simple block of code to hide/show two divs. It works great, the only issue I have is that I need to return the display value to the #MSOZoneCell_WebPartWPQ2 back to table. I have set it to none in the css initially. The last line doesn't seem to take effect.
here is the code:
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').css('display') == 'table';
});
});
You're using == operator
Try this:
$(document).ready(function(){
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggle();
$('#example_wrapper').toggle();
$('#MSOZoneCell_WebPartWPQ').attr('style','display:table;');
});
});
you should use .css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
so your last line should be
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
when you call .css( propertyName )
$('#MSOZoneCell_WebPartWPQ').css('display);
you are Getting the value of said property not setting it
Get the computed style properties for the first element in the set of
matched elements.
Update 1:
please note that Jquery's .show(), .hide() and .toggle() will only work with elements with block display property.
so one way to avoid changing the display property back and forth is to wrap the wanted elements in a div (container) and .toggle() it.
I have created a JSFiddle, I warped each div in a container div with a calss called "toggle" and set initial display value of one of them to "none" using style attribute.
<div class="toggle" style="display:none">
now I toggle between them using this
$('.toggle').toggle();
Update 2:
you can also use .toggleClass() here's another JSFiddle
Add this to your CSS
#example_wrapper.hiddenDiv, #MSOZoneCell_WebPartWPQ2.hiddenDiv {
display: none;
}
add a class to the div you want initially hidden
<div id="MSOZoneCell_WebPartWPQ2" class="hiddenDiv">
toggle the class using this
$(function() {
$('#swap').click(function() {
$('#MSOZoneCell_WebPartWPQ2').toggleClass("hiddenDiv");
$('#example_wrapper').toggleClass("hiddenDiv");
});
});
in this example I'm using a class called "hiddenDiv", if you change it make sure the class name is the same in CSS, HTML and JS.
you are sure you need "==" to set the value? or one "="
Firstly == is an equality check. You should use = to set a value.
Secondly, the css() method setter accepts two parameters. The rule to set and the value itself. Try this:
$('#MSOZoneCell_WebPartWPQ').css('display', 'table');
Related
I'm working on adding specific data- attributes to my slideshow so I can add custom backgrounds for each slide. What I do is add the custom data attribute, then assign the value to a variable using jQuery. After that, I pass the variable to the .css() and assign it to the background property.
var elementSection = $(".cycle-slideshow section")),
sectionBackground = elementSection.attr("data-cycle-slide-background");
$(elementSection).css({background: sectionBackground});
<section data-cycle-slide-background="url(images/slides/laptopgreenery.jpg)"></section>
<section data-cycle-slide-background="url(images/slides/slide1bg.jpg)"></section>
<section data-cycle-slide-background="url(images/slides/slide2bg.png) repeat;" data-cycle-hash="2"></section>
However, doing it this way sets every slide's background to the one in the attribute, in this case "laptopgreenery.jpg".
You should loop over each slide:
elementSection.each(function() {
$(this).css('background', $(this).data('cycle-slide-background'));
});
Important: make sure you don't have ; at the end of data attributes, it will make rule invalid and it will not be applied.
Demo: http://jsfiddle.net/vetnLr8n/
You can taked advantage of the anonymous function available to the css() method; inside of which `$(this) refers to the current slide):
$(elementSection)
.css({
background: function() {
return $(this).data('cycle-slide-background');
}
});
I have set a data attrabute called "sel", and the following jQuery asks for the data-sel that has a value of 'true', but it's adding it to every class, even the ones that don't have 'data-sel'
jQuery:
var selTrue = $(".slide").data("sel", 'true');
$(selTrue).css({'display': 'inline-block'});
HTML:
<div class='slide' data-sel='true'>1</div>
<div class='slide' data-sel='true'>2</div>
<div class='slide'>3</div>
<div class='slide'>4</div>
How do I prevent if from applying to to every class?
Trying to solve:
• I tried this:
$(".slide").not(selTrue).css({'display': 'none'});
still didn't solve my problem
Fiddle
In order to select against your data attribute you need to use
$(".slide[data-sel='true']").css({'display': 'inline-block'});
what you're doing is actually selecting all elements with the slide class, and then setting their data-sel attribute.
here's the documentation
http://api.jquery.com/attribute-equals-selector/
$(".slide").each(function () {
if ($(this).data("sel") === true) {
$(this).css({'display': 'inline-block'});
}
});
You are setting the data-sel attribute to true with
$(".slide").data("sel", 'true');
var selTrue = $(".slide").data("sel", 'true');
What that does is fetch all divs with class "slide" and set the value 'true' for key 'sel' on them. So selTrue is a jQuery array of all divs with class .slide. And then you are setting display: inline-block for all elements in the array (the 4 divs on the page).
What you want to do is :
$('.slide[data-sel = "true"]').css('display', 'inline-block')
The square brackets indicate a query based on an attribute.
I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();
I'm using zepto.js for my current project which has the same removeAttr() method as jquery has.
i'm applying a margin-top to a bunch of elements – works fine.
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.css('margin-top', '100px'); //works fine
However I also need to remove it again in a resize-event.
if ( $(window).width() <= 984 ) {
//$apply.removeAttr('style'); //doesn't take effect
$apply.css('margin-top', '0'); //works fine
console.log('< 984');
}
So i'm able to set the margin-top back to 0 but can't completely remove the style attribute from the selector.
Any ideas why? I don't get any erros, it just doesn't take effect.
The correct way to remove it, is by not setting a value when using the .css.
$apply.css('margin-top', ''); // remove property
When a value for a property is empty, that property is removed.
Read more here.
From http://api.jquery.com/css/
Setting the value of a style property to an empty string — e.g.
$('#mydiv').css('color', '') — removes that property from an element
if it has already been directly applied, whether in the HTML style
attribute, through jQuery's .css() method, or through direct DOM
manipulation of the style property. It does not, however, remove a
style that has been applied with a CSS rule in a stylesheet or
element.
So you can use $apply.css('margin-top', '') to remove the margin-top style.
Use .removeClass() to remove all styles from the element.
I would recommend creating a CSS class that you add and remove instead.
This way you can easily modify the margin value in one location and not have to change it in multiple locations.
CSS:
.myMargin { margin-top : 100px; }
JS:
var $apply = $('aside[role="sub"], aside[role="event-info"], aside[role="attend"]');
$apply.addClass("myMargin");
In the resize event:
if ( $(window).width() <= 984 ) {
$apply.removeClass("myMargin");
console.log('< 984');
}
How to add style=display:"block" to an element in jQuery?
$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });
There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()
If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.
If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this: