I am trying to add inline style to a div using jquery, following is the div as I inspect in firebug (attached below)
I want to keep the existing CSS as well, I just have to add margin-left:0 and margin-right:0 to the existing class, following jquery I've tried but no luck:
jQuery(document).ready(function($){
$(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
What are the other way to achieve? (please note that I am editing wordpress site and the divs are generated from page builders plugin)
I think you just have to erase the $ from function($) and change $to jQuery in the function itself:
jQuery(document).ready(function(){
jQuery(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
perhaps you can add inline css:
<style type="text/css">
div.testimonial_wrapper {
padding-left : auto !important;
padding-right: auto !important;
}
</style>
the above will apply on new elements also but make sure it comes after the .css include
i have added my own styles and your required styles also, with out disturbing the line styles
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
$(".testimonial_wrapper").css({'margin-left':'auto', 'margin-right':'auto'});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p class="testimonial_wrapper" style="background-color:#ff0000;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#00ff00;border:1px solid #000;">This is a paragraph.</p>
<p class="testimonial_wrapper" style="background-color:#0000ff;border:1px solid #000;">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
Related
Is it possible to add CSS selector inside the body section? Here is my code for example (but it doesn't work):
<html>
<head>
</head>
<body>
<div style= "a[target=_blank] {background-color: yellow;}"> **css selector on this section
test
test1
test2
</div>
</body>
</html>
No, you can not use selectors inside inline style. the inline style will effect only on element that style tag located in.
It seems to work fine when using css in a style sheet.
As far as I know inline styles only effect the element the style is on and so cannot be used to change another.
a[target=_blank] {
background-color: yellow;
}
<html>
<head>
</head>
<body>
<div>
test
test1
test2
</div>
</body>
</html>
I am trying to identify elements by their tag name, but have trouble executing the toggle property using javascript. Perhaps I am not using toggle() correctly, please explain what I am doing wrong.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
position: relative;
float:left
}
</style>
<script>
var x=document.getElementsByTagName("button");
var hello=document.getElementsByTagName("h1");
x.onclick=function(){
hello.toggle(
function(){hello.style.visibility:visible};
function(){hello.style.visibility:hidden};
)
}
</script>
</head>
<body>
<h1>hello</h1>
<button>Toggle between hide() and show()</button>
</body>
</html>
toggle() is a jquery function that shows hidden elements and vice versa.
To use it you need to add jquery in your html
e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and then with jquery you can add an event listener to the button:
$('button').click(function() {
$('h1').toggle();
});
I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...
I am having an issue today when adding a class to an HTML5 DOM object. Sorry if this is a newbie question. :P
Ex:
<!DOCTYPE html>
<html>
<head>
<title>stackoverflow example</title>
<style>
.centercontent {
width:100%;
max-width:1080px;
margin:0 auto;
}
</style>
</head>
<body>
<header>
<!-- All direct children of BODY should be centered on the page; however, children should not be added to .centercontent -->
<h1>Site Name</h1>
</header>
<section>
<p>Hello World</p>
</section>
<footer>
© no one 2012
</footer>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script>
<script>
$("body > *").addClass("centercontent");
</script>
</html>
I believe that it is my JS; however, I have never used addClass before. Thank you all very much for your time. :)
Have a good day!
write simply
body > * {
width:100%;
max-width:1080px;
margin:0 auto;
}
as a straight CSS rule in the head section: looking at your example jQuery seems not really necessary for this task.
This selector is also valid in the CSS block and it works fine (not on IE<=6).
You are not using a $(document).ready(function() {...}); with your jquery. Try this:
$(document).ready(function() {
$("body > *").addClass("centercontent");
});
Also you are missing an s at the end of your script reference
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.j"></script> // original
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> // fixed
I have a question, could you help me:D
I used dijit.editor in dojo. When i input img tag like :
<img src="abc.jpg" alt="" class="alignleft" />
into the editor,
So i want to style css for class .alignleft in editor, how can i do it, because I can't style html code in the editor. Outside Editor everything is ok.
Thanks for any suggestion:D
Another alternative is to define stylesheets direclty in the editor's parameters. The semicolon ";" is used as a separator.
var editor = new dijit.Editor({
styleSheets: 'linkToStylesheet1;linkToStylesheet2;etc.'
});
The dijit.Editor runs inside iframe, which is the reason your parent document styles are not working. You have to inject styles into editor's iframe. The most straightforward way I can come with is to put styles' definition inside dijit.Editor tag:
<div data-dojo-type="dijit.Editor">
<style type="text/css">
.blue {color: blue;}
</style>
<p class="blue">blue</p>
</div>
Some code to explain the difference:
<head>
<style type="text/css">
.green {color: green;}
</style>
</head>
<body class="claro">
<div data-dojo-type="dijit.Editor">
<style type="text/css">
.blue {color: blue;}
</style>
<p class="green">green is NOT green</p>
<p class="blue" >blue is blue</p>
</div>
<body>
You can also specify a stylesheet to be used by the editor, thus avoiding having to rewrite any css. Specifying the same stylesheet you're using for your parent page would solve your problem. When I instantiate this programmatically, it looks like this:
var editor = new dijit.Editor({
/* snipping my many parameters... */
});
editor.addStyleSheet('style.css');