I have an element I am changing with an animation as follows:
that$.animate({
opacity:'0.0'
},300,
function() {
$('#menuHolder').css({
left:'0px',
top:'0px',
height:'100%',
width:'100%',
},0);
This is meant to make menuHolder take up the whole screen. When clicking a separate button, I want menuHolder to revert to the original values i assigned in the style sheet. Here is the code for the return button:
$('.return').bind('click',
function() {
$(this).hide(300);
tMT$ = $(this).parent();
tMT$.animate({
opacity:'0.0'
},300,
function() {
$('#menuHolder').css({
left:$(this).style.left,
top:$(this).style.top,
height:$(this).style.height,
width:$(this).style.width
},0);
})
This doesnt work, because I have assigned the original css values with when that$.animate was executed. How should I assign the values of .return's click so that menuHolder reverts to its original css?
I don't want to manually reassign values. I would rather do it programmatically =D. Any help would be great.
Cheers.
That is why you should not change individual CSS properties from your jQuery/Javascript code. Other than not being elegant, readable and maintainable and not separating presentation from behaviour, it will lead to situations like yours.
Instead:
Create classes in your CSS file:
.full-screen { left: 0; top: 0; width: 100%; height: 100%; }
and only use jQuery/Javascript to add/remove them:
$('#menuHolder').addClass('full-screen');
...
$('#menuHolder').removeClass('full-screen');
jQuery Class Manipulation Methods
I agree with the other answers.. BUT...
Sometimes adding css in the script is required. For example, when animating or setting dynamic css properties.
Differences between .addClass() and .css()
.addClass() actually adds a class and the CSS for it.
.css() adds the CSS to the tag
Example
<!-- default -->
<div></div>
<!-- added class -->
<div class="added-class"></div>
<!-- added css -->
<div style="height:100px"></div>
the way to change it back is to just leave the property empty.
$(selector).css('height','');
It will remove the style-property completely and output:
<!-- removed css -->
<div></div>
Best way to accomplish this is by adding a class, which you can remove when you want the revert the original CSS. This makes it also easier to maintain, all the CSS stays in your stylesheets.
$('#menuHolder').addClass('animate')
and
$('#menuHolder').removeClass('animate')
in your stylesheet:
.animate {
left:0px;
top:0px;
height:100%;
width:100%;
}
Related
Here is an example:
https://jsfiddle.net/6kg43qfr/
Code:
Jquery:
$('#foo').css('background-color', '#f8f7f7');
Html:
<div id="foo">
test
</div>
CSS:
#foo:hover{
background-color: red;
}
Question: Why doesn't the hover work?
That is because how you set the color in your javascript code.
Inline styles has more priority then styles applied to classes or id's
There are actually many rules, of how to properly override styles. Please take a quick look at this http://www.hongkiat.com/blog/css-priority-level/
I strongly suggest you to read more about css before proceeding with the project, in order to keep code clean and maintainable.
in order to fullfill your needs, take a look at this fiddle:
https://jsfiddle.net/6kg43qfr/2/
$('#foo').addClass("green-background")
Because the $('#foo').css() function puts the style in a style attribute on the element, which therefore overrides the stylesheet.
The best solution is:
#foo:hover{
background-color: red;
}
#foo {
background-color: #f8f7f7;
}
Or
You also can use this:
$('#foo').css('background-color', '#f8f7f7').hover(
function(){
$(this).css('background-color','red');
},
function(){
$(this).css('background-color','#f8f7f7');
});
A tale of two fiddles (please use the run button after the jsfiddle pages load for a clearer idea of what is happeneing).
The First Fiddle
Dead simple:
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
With this css:
.noScroll {
background-color: pink;
position: fixed;
width: 100%;
top: 200px;
}
We have a class. The class is added to body, changing the body's appearance/behavior. The class is removed from the body and the body reverts to default. Working as expected.
The Second Fiddle
$("body").addClass("noScroll");
alert($("body").hasClass("noScroll"));
$(".noScroll").css({
"background-color" : "pink",
"position" : "fixed",
"width" : "100%",
"top" : "200px"
});
$("body").removeClass("noScroll");
alert($("body").hasClass("noScroll"));
No accompanying CSS this time, as it's added by jQuery, but otherwise pretty similar to above. Working to a point. CSS is applied, but it isn't removed. Why is this happening?
Thanks!
For the second fiddle, when you call css() on the noScroll selector, it applies those styles inline to the element with class noScroll. However, those styles are not preserved in a named css style.
So the code is actually working. It is adding a class noScroll, but no styles are affiliated with that class in the css. Also, it is removing that class, but the styles from the css() call stay because they were applied inline.
To get a better idea, see this fiddle where the inline style is removed manually at the end.
Inline styles and CSS classes are two different concepts. Adding and removing one does not add or remove the other. Inline styles only override styles applied via classes.
The selector you used to find the element to apply the inline styles to does not get stored anywhere. So jQuery/the browser can't possibly know which inline properties to remove when you remove the class.
You've applied inline CSS in the second example. This is equivalent to doing this:
<body style="background-color:pink; position:fixed; width:100%; top:200px;">
...over this (your first example):
<body class="noScroll">
...which is obviously removed by the removeClass(...) function call.
I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor
Is there a fallback for jQuery isotope if JavaScript is disabled?
Suppose if I m using there fitColumns property, is there a fallback to that layout style if JavaScript is disabled, like what u have in d
new myspace.
the initial posts, which appears on your myspace home page, will be styled properly but no additional post will load when you further scroll.
What kind of CSS structure or fallback methodology can be used for such situations?
If JavaScript is disabled and if you want to keep the elements positioned nicely like as if the jQuery Isotope is doing its job then you can only rely on CSS. That would mean you would have to manually position those elements in the order that you want.
If you're OK with that then follow these steps below to start:
Put a class name on the main wrapper of your Isotope elements such as off. For example: <div id="isotope-container" class="isotope off">
Start positioning your elements manually and include .off as one of the selectors. For example: .isotope.off .isotope-element-1 { position:absolute; top: 10px; left: 10px; } .isotope.off .isotope-element-2 { position:absolute; top: 10px; left: 100px; }
Then on your general jquery file where you have all other stuff written on, check if .off class exists and if it does, remove it. For example: if($('#isotope-container.isotope').hasClass('off')){
$('#isotope-container.isotope').removeClass('off');
}
Got a page that displays some buttons (background images, etc) and they are all clickable. What I want this specific button to do is open the target page in another browser tab using *target="_blank"*. The way it is setup as the href in a div I cannot do this. Any ideas on a work around for this?
<div class="dashboard_navbutton" href="Home/RequestRedirect" style="background-image: url('#Url.Content("~/Content/images/Form_button.png")');">
<p>Insert witty text here</p>
</div>
Just make that div an a and add display:block; to the style.
EDIT: Ensure that your chosen DOCTYPE supports the use of p inside an a element. More generally, it should use the computed style for display rather than the tag name to determine if an element is inline or block in terms of having one in the other. I believe the HTML5 one is fine: <!DOCTYPE html>.
trap the onclick event for the div, call a javascript function, have the function openthe window.
html snippet
onclick="opennewwin()"
function opennewwin(){
var awindow = window.open(loc, "blank", "height=500px,width=500px");
}
I was trying to dynamically add divs that would also function as links.
This was my solution using CSS.
First the container needs relative positioning.
.container {position: relative;}
Next, the link needs to fill the container.
.container a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
Like I said, I dynamically assembled the div, but the html would look something like this:
<div class='container'>[some other content]</div>
The container must be position relative, otherwise the position absolute link fills its first position relative ancestor (probably the whole viewport).
Of course, you can add styling to the div or the link. Note, I was using a position: sticky nav-bar, and I had to set it's z-index high in order to avoid collisions with the div buttons.
Pros: whatever styling and targeting you set for your links will apply. Good 'style': doesn't put a block element inside an inline (should avoid browser issues, though I haven't thoroughly tested it). Does not require any other languages or frameworks.
Cons: Not as simple as Niet's answer, but shouldn't be Doctype dependent.