Directory Structure:
index.html
--admin
----suit.css
And the part of the css file is:
#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}
I want to write a javascript code in the index.html:
<button onclick="">Change CSS</button>
to change the css file like this:
#suit-left { display: none; }
.suit-columns { padding-left: 0; }
How can I do this?regards,thanks a lot
If you want the apply css on particular element by javascript, do something like this.
<button onclick="changeCss()">Change CSS</button>
UPDATE
<script>
function changeCss(){
var suitInput = document.getElementById('suit-left');
suitInput.style.display = 'none';
//UPDATED the answer
var siteCol = document.getElementsByClassName('suit-columns')[0];
siteCol.style.paddingLeft = '0';
//siteCol.style.paddingRight = '0'; //incase of want padding right 0
}
</script>
What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.
Here is a simple example:
.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }
In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.
In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.
I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -
Add class to given element
Using an HTML button to call a JS function
You can write the script in this way and paste below script at head block of index.html
I assume that you have knowledge of jquery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
function ChangeCss(){
$('#suit-left').css('display','none');
$('.suit-columns').css('padding-left','0');
}
<script>
<button onclick="ChangeCss();" >
Now it will help!
So basically using css function of jquery you can change css/style attributes.
I hope it will help you.
Related
I am trying to show a div element on a specific page e.g. - example.com/my-account , right now it is showing on all my-account pages for example - example.com/my-account/lost-password
I know how to use JavaScript but not in webpages so can someone help me? This is how I would do it with JavaScript. I just need someone to help get this to work inside the php page I am trying to edit.
<script>
var cx = window.location;
var curWin = String(cx);
var myAccount = "http://example.com/my-account/";
if (curWin == myAccount){
<div id="banner"><img src="http://img.c5454o.png"></div>
}
</script>
If you open your developer tool, you can see that the body is assigned with classes (when using <body <?php body_class(); ?>>).
For example <body class="home page page-id-7 page-template-default">.
So from here on, you can tell css what to do like so:
#banner {display: none;}
body.page-id-7 #banner {display: block;}
So you don't realy need Javascript to detect a specific page and display a specific element.
Add Your condition like this
var cx = window.location;
if(cx.substr(-11)=="my-account/") {
//then do whatever you want
}
OR if your string is without last slash then..
if(cx.substr(-10)=="my-account") {
//then do whatever you want
}
substr(-11) function will cut your string of url from last 10 indexes so
you can apply your contion then.
if you want to show a div element on specific page then create a unique id on that page like <div id='UniqueId'> then go to javascript code and write,
jQuery Code is:
if($('#UniqueId').length > 0)
{
//show specific element
}
I'm new to JavaScript. I managed to add dynamic inputs after clicking on a button but I want to know how to apply the CSS to those added inputs, if anyone can give me a simple example i'd be glad!
Thank you!
Perhaps something like this:
<button onclick="newInput()">Add new input</button>
function newInput() {
var newElement = document.createElement("input");
newElement.className = "newClass";
document.body.appendChild(newElement);
}
And in the style section, or in the .css file, you'll have:
.newClass {
/*Styles go here*/
display: block;
}
Fiddle example of the above: http://jsfiddle.net/8zen9wwo/3/
Here is a very simple example using jQuery:
http://jsfiddle.net/kmrvpz99/
Html Code
<div class="container"></div>
Javascript Code
$('.container').append('<input type="text" class="yourstyle">');
var manualCss = $('<input type="text">').css('background-color', '#333');
$('.container').append(manualCss);
The css File
.yourstyle {
background-color: #000;
}
By defining .yourstyle in the css file, all elements on the html site that possess this class, even those dynamically added via javascript, will use this style. You can however manually modify the css by setting the style attribute on the element directly.
If i have a script inside a div, how do i get the id of that particular div?
(so that i can do like below, but with varying div id's):
<div id="chart_div1" class ="googlepie">
<script type="text/javascript">
drawChart('chart_div1');
</script>
</div>
[edit]:
I have two html views where when one view's button is clicked the second view is shown. some javascript reconstructs html to do this, and I only wanted the charts to be shown on the second view, so i have a click event handling this.
But strangely, i have only managed to load a particular chart in a particular div (of multiple repeated), like above, by putting the script that calls drawChart() in the div itself. For this reason i couldn't relocate the script into a more comfortable position like some have suggested. Also, no matter what suggested methods to fetch the parents div 'ID' i tried, i kept getting an 'undefined container' error.
For example this didnt work for me:
<div class ="googlepie" id="chart_div1" style ="position:absolute; top: -8%; left:63%;">
<script type="text/javascript" class ="chartscript" id="bakegooglepie">
// drawChart($('.chartscript').parent().attr('id')); // this didnt work
// drawChart($('#bakegooglepie').parent().attr('id')); // neither did this
// var parentElementID = $(document.body.lastChild).closest('div').id;
// drawChart(parentElementID); // this didnt either
drawChart('chart_div1'); // only this did
</script>
For this reason my (particular) solution is to construct the ids and call them specifically in drawChart instead of getting the id with javascript.
However, i have chosen the answer to the original question to be one that everyone else seems to work for and so should work for others.
Note: that as others have suggested in most situations you shouldn't need to get the parent ID like my question supposes.
Try this (jQuery):
<div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
<script type="text/javascript">
var parentElement = $(document.body.lastChild).closest('div');
drawChart(parentElement);
</script>
</div>
Or this (basic JavaScript):
<div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
<script type="text/javascript">
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
drawChart(parentTag.id);
</script>
</div>
See here for more details: how to select parent of <script> element
Although this answers your question on how to achieve it, I believe this is not the best approach. You should place your JavaScript code at the end of the HTML document and use proper selectors to target your elements.
Cheers!
to get the id of the parent div using jQuery :
$(this).parent().attr('id')
in your case :
<div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
<script type="text/javascript" id='example'>
drawChart($('#example').parent().attr('id'));
</script>
</div>
It makes no difference where the script tag is on the page. you still have to use
document.getElementById('chart_div1');
You can't get elements relative to the <script> tag. Plus your ID's should be unique anyway so it shouldn't matter.
Well actually there are a few ways you can do this but it is not even slightly worth it. By doing it with document.body.lastChild it could break your whole script if the page loads even slightly different to normal.
This should be so simple, but I'm making heavy weather of it.
Div region set out as:
<div class="maincontent">
Stuff in my div
</div>
CSS for that div:
.maincontent{
height: 100%;
background-size: 100%;
margin-left:1%;
margin-right:1%;
font-size:16px;
}
Then I have:
onLoad=changeBackground();
But before that I have the function:
function changeBackground(){
document.getElementByAnything('maincontent').style.backgroundColor="yellow";
}
I know its making the call to the function because if I put an alert box in there that shows. But no matter what combination of getElementBy I can't make any changes to the background?
Please help as its driving me insane!
TIA
Have you tried giving your div an id and using document.getElementById('divId') instead? I think if you want to get the element by class you have to use jquery.
getElementById('maincontent')
and change your div to have an id="maincontent"
Try giving the element an id and doing document.getElementById and then do console.log in firebug or other developer tools and verify that you are actually getting a dom element back.
Once you have verified that you should then be able to switch the background color
You're trying to select the div using its class. This isn't quite as straightforward as getting it by id. Try this:
<div class="maincontent" id='mainContent'>
Stuff in my div
</div>
function changeBackground(){
document.getElementById('mainContent').style.backgroundColor="yellow";
}
You can see a working example here: JSFiddle
If you want to get the element using its class, I would recommend using Jquery or another library.
If you're using in line Javascript then use, instead:
onchange="changeBackground(this)"
And:
function changeBackground(elem){
elem.style.backgroundColor = "yellow";
}
Edited as I suddenly remembered you were discussing events based on div elements. As a div doesn't natively support the onchange event, I'd suggest amending your code to the following (though changing the event-type onmouseover to whatever event you find most appropriate):
function changeBackground(elem){
elem.style.backgroundColor = 'yellow';
};
JS Fiddle demo.
Also, to remove the events from in-line code, and to make the JavaScript more portable and less 'intrusive':
function changeBackground(elem){
elem.style.backgroundColor = 'yellow';
}
var maincontents = document.getElementsByClassName('maincontent');
for (var i=0,len=maincontents.length; i<len; i++){
maincontents[i].onmouseover = function(){
changeBackground(this);
}
}
JS Fiddle demo.
Bear in mind, though, that some browsers (such as Internet Explorer 8 and below) don't support getElementsByClassName().
I recommend using jQuery if you want to select a DOM by class name.
Put this code in your <head> part of your html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
and change your function to
function changeBackground() {
$(".maincontent").css("background-color","yellow");
}
I have the following HTML code:
<style>
.thing { color: red }
</style>
<p class="thing">This is a nice thing</p>
I would like to change the ".thing"-style for all current content and all future content which comes to the page via AJAX.
$('.thing').css('color', 'blue');
This would work, but if new HTML code is added to the document via AJAX, all ".thing"-elements will still be colored red.
What I want is to change the whole style property ".thing" for the document and not only for the current elements (with a jQuery selector).
Thanks!
You could add a style rule in the header with the DOM
Demo: The Problem
Demo: DOM Mutation Solution
var newStyles = document.createElement("style");
newStyles.type="text/css";
newStyles.innerHTML = ".thing{color:blue}";
document.head.appendChild(newStyles);
You could use a call back function on your AJAX code to run the jquery css function.
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$('.thing').css('color', 'blue');
}
});
If for some reason you are not able to use any of the techniques given in the duplicate question, you could modify the stylesheet itself, for example:
document.styleSheets[1].cssRules[0].style.color = "blue";
However, the above line is not cross browser (I don't think it will work in IE, which prefers rules instead of cssRules) but it's possible to make it cross-browser compatible with a bit more code.
All it does is change the actual stylesheet, so it's like you had color: blue in there all along. This will affect elements currently on the page, and any that are added in the future (see the fiddle for a working example).
Note that you'll have to modify the indexes to suit your page. The indexes used in the example are just what work for the given stylesheet on jsfiddle.net.
Edit an attempt at a cross-browser solution:
var cssRules = (document.styleSheets[1].cssRules) ? document.styleSheets[1].cssRules[0] : document.styleSheets[1].rules[0];
cssRules.style.color = "blue";
You could add a style rule for blue text
<style>
.thing { color: red }
.thing.blue { color: blue }
</style>
and add "blue" class via call back function on your AJAX
$('.thing').addClass('blue');