How to reset inline css applied by jquery?
Tags: javascript,jquery,html,css,dom
Problem :
I've updated my self-made responsive menu but I have a problem with the menu disappearing when resizing.
When I downsize my window below 1100px width and open the responsive menu, everything is fine. However when I close the responsive menu Jquery applies a display: none inline attribute.
This makes my screen disappear when I resize back to full width.
I need some way to override or remove the inline css with everything working properly. Can anybody suggest how to fix this?
<script>
$(document).ready(function() {
$('.button-open').click(function() {
$('.navigational-menu').slideToggle('test');
$(this).toggleClass('button-close');
});
});
</script>
Solution :
If you have no other inline css property try the updated Pen
http://codepen.io/valentinpalkovic/pen/rVOVjR
<script>
....
$('.navigational-menu').slideToggle('test', function() {
if($('.navigational-menu').css("display") == "none"){
$('.navigational-menu').removeAttr("style");
}
});
....
</script>
CSS Howto..
Remember when you wanna center a nontext block, use margin:0 auto; which is intended for that. Also if you make image display:inline-block I think you could use text-align:center Hope that...
http://jsfiddle.net/Muthukumaru/n4d80zLd --> jsfiddle link Use the SVG code for the marker <svg class="marker" style="left: 300.779px; top: 95.16px;" height="66" width="66"> <circle cy="33" cx="33" class="mark" r="25"> <set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s;...
Try changing the width to 21% for #left and then add a max-width: 340px. #left { left: 3%; position: absolute; width: 21% max-width: 340px; margin-top: 10px; } ...
Try the following: .border { border: 1px solid red; } $('a').click(function() { e.preventDefault() $(this).closest('div').addClass('border') }) or: $('a').click(function(e) { e.preventDefault(); var h = document.location.hash.replace('#', '') $('.'+h).addClass('border') }) ...
why do you need to do it from java-script instead of using CSS media queries? .first-image{ margin: 0 0 -1px 0; } @media (min-width: 1445px) { .first-image{ margin : 0...
To take Kobi's answer a little bit further. I would give the li(s) some common class if possible or an id on the ul. var $li = $('li.clickMe'); // or...
Just remove all special characters when you focus in on the input box: $("#primary_phone").on("click", function() { var thisVal = $(this).val(); var value = thisVal.replace(/[^\/\d]/g,''); $(this).val(value); }); Now when you click...
you need to set vertical-align to .oneAgentLegent as well. And eventually set a line-height to #agentsLegend. DEMO #agentsLegend { border: 1px solid black; border-radius:10px; display:inline-block; margin-top:5px; height:38px; line-height:30px;/* tune baseline...
It's because those elements are on top of the div with the shadow. In order to put them behind, you can use position: relative; on the background element and give...
You can change class for your toaster to toast-top-full-width <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'}"></toaster-container> OR you can create custom css rule and apply it to your toaster ie. <toaster-container...
To answer my own question: There were some custom styles on the page which were causing an issue for me. The following property will tell the browser to use a...
Try this <!DOCTYPE html> <html> <head> <style> * { padding: 0px; margin: 0px; } #banner { width:100%; background-color:green; } #wrap1 { background-color:black; width: 960px; } #wrap { margin: 0px auto;...
I added text-center class to align the menu items to center. Added display:block to menu item. Check static code here. #logosignin img { width: 250px; height: auto; margin: 0 auto;...
I like Divyanshu's answer, but instead of listing all the classes would suggest just computing the class name inline like: ng-class="'class' + $index%4" Here is an update to his fiddle:...
Your selector represents an img element that is a descendant of a div element with the .author_avatar class that is a descendant of an element with the .post_author class that...
The new contents appended by jquery (or prepended, or added in general) are affected by any css already present in the DOM. Did you try it before asking?...
you can use position:absolute in your SVG and some text-indent in your #itemCountForCart .buttonCart { padding: 2px 40px; border-radius: 6px; border: none; display: inline-block; color: #fff; text-decoration: none; background-color: #28a8e0;...
You can put it into your PHP file using <style> tag: <style> img { background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12); height: 100%; width: 100%; position:...
You can avoid it using user-select: none; The text of the element and sub-elements will not be able to be selected Note This feature is non-standard and is not on...
Christopher Pearson was right about using transition-delays, but you'll need to change a couple of other things as well. #basarilar { float:right; margin:7px 357px; width: 140px; height: 24px; position: relative;...
Short Answer: No, not directly However, a mixin could be used to have a similar effect. // Sets the style only for pseudo selectors @mixin setLinkSelectorStyle { &:hover, &:link, &:active,...
try doing something in a style tag instead <style type="text/css"> form{ background-color: #000; } </style> Or use the style attribute in the code behind...
The resolve-url-loader will allow you to specify your font url() relative to your .sass file. The .css should have a path url that Webpack can resolve to a module. The...
change CSS .page{height: 100%;} .page-inner { margin-bottom:-30px; min-height: 100%; } .page-inner:after{height:30px; content: ""; display: block; } .footer { height: 30px; color: brown; border: 1px solid brown; } https://jsfiddle.net/8nrukse9/5/...
Did some optimisation, toggling an additional sticky class. Checked on Firefox with smoothscroll and a variety of padding-margin and seems to respond to the exact positions : Demo .sticky {...
I have tried this and this works properly for me, here has no waste of space. You can try this. This is my <p:menubar>. Note that I'm using styleClass="menu" instead...
So, I got an idea to abuse CSS3 selectors a bit and it seems to be working, though I wonder how legit this is. document.querySelector('div[style*="order: 25;"]') Then to swap two...
element: hover{ filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter:...
This can be achieved simply by just putting these two CSS rules: padding: 25% and width: 50%. That will center the image equally from the left, top, and right. Here...
There are a couple of things wrong at the moment. Firstly, the second line of code you added is actually part of some chained methods. You don't need the first...