Let's consider there is a style sheet in an html page as shown below
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.
So the Style sheet in my html page should be updated like shown below:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
I can use jQuery css to add CSS rules as shown below
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)
I am developing a code editor which is why I face such a problem.
it took me a long time but finally here we go: DEMO
if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
and then after the function is called it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
The Function:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
Try this
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
This is assumed that you have only one <style> tag in page
You can apply hardcore css to perticular div...Like this
$('#main').css("background":"blue");
Related
I have been looking for over 3 hours trying to figure this out so my apologies if you think this has been answered.
I am fully aware how to add a show/hide div to a page but I am struggling to add it to a category page in WP.
My site: http://www.ticketyoda.co.uk/6-nations-tickets
What I require is to be able to have a DIV under each category that can be shown when a button is selected. At present when I select a toggle it hides and then shows all divs on the page.
You're targeting all divs with the class "flip". You can remedy this by adding this to specify that you're only interested in the clicked-on element:
$(document).ready(function() {
$(".flip").click(function() {
var target= $(this).next(".panel");
$(target).toggle();
});
});
Have some more info.
See here..
http://www.ticketyoda.co.uk/professor-green
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("");
});
});
</script>
html
<style type="text/css">
div.panel {
margin-top:10px;
margin-left:0px;
margin-bottom:120px;
padding: 0px;
background: #fff;
border: solid 1px #fff;
}
p.flip {
margin-top:0px;
margin-left:540px;
margin-bottom:0px;
padding: 0px;
margin-top:-32px;
background: #fff;
border: solid 1px #fff;
}
div.panel {
widht: 50%;
height: 60px;
display: none;
}
</style>
<p class="flip"><img src="http://www.ticketyoda.co.uk/wp-content/uploads/2013/03/ticketview.png" /></p>
I have some html data coming from database dynamically. In some of the html the div is properly closed and some records the the div inside is not properly closed with .
I put these things into a jquery tab but when the unended div comes the tab stop working. I want something in which the the open div's will be ended dynamically.
If you have access to the HTML before it's rendered then it's easy: you let jQuery chew it for you. Example:
jQuery("<div>Hello <span>Sir</span>")[0].outerHTML;
Will give you:
<div>Hello <span>Sir</span></div>
So if you are able to get the received HTML in a variable "dbStringName" before it's inserted into the tab so just do
var myCleanedUpHTML = jQuery(dbStringName)[0].outerHTML;
and put that in your tab.
You might want to look into making sure the html that is put into the database is all closed properly to begin with.
Or you could use javascript's indexof to check if the div is properly closed, and if not, add a closing div.
Something like:
if (!dbStringName.indexOf("</div>") > -1){
//add div here
}
use this css to table using div
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
I am composing notifications that consist of a title and some description. And displaying it next to the form.
Composing elements in jQuery:
var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').text(plainText);
var $notification = $('<span></span>').append($title).append($description).addClass('notification');
CSS:
.notification{
border: 1px solid red;
margin: 10px;
}
Ideally, I would like the border to surround the title and description. What am I doing wrong here?
Fiddle
<span> is an inline element by default. To force it to respect the rectangular dimensions of the content inside, use display: inline-block;
.notification{
border: 1px solid red;
margin: 10px;
display: inline-block;
}
Demo: http://jsfiddle.net/7b3j2/20/
Just add display:block; to .notification calss
.notification{
border: 1px solid red;
margin: 10px;
display: block;
}
or change the notification wrapper to div instead span
var $notification = $('<div></div>').append($title).append($description).addClass('notification');
Demo: Jsfiddle
By clicking on a button I'm adding new elements to the list. Each element has its own message that is absolutely positioned against this element. This works fine until I add 'overflow:hidden' property to the parent list element. Obviously, the message is hidded. If the overflow:hiddne property must be in place, how can I show message for each new element?
Here is the jsFiddle and the code:
HTML:
<span id='click-me'>Click me</span>
<ul id='list'></ul>
CSS:
#list {
width:100px;
height:100px;
border: 1px solid blue;
overflow:hidden;
}
.option {
width:100px;
height:20px;
border: 1px solid green;
position:relative;
}
.message {
width: 79px;
height: 20px;
background: gray;
position: absolute;
right: -90px;
top: 0;
}
JS:
$('#click-me').click(function() {
$('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});
EDIT:
I tried playing with overflow-x and overflow-y properties. But somehow it's not doing what I expect it to do. Adding these properties to the #list element:
#list {
...
overflow-y:hidden;
overflow-x:visible;
}
creates bottom scrollbar. Is it expected behavior?
Change height of #list to min-height.
Check the updated Fiddle.
My question is, why "text-overflow:ellipsis;" doesnt work for me?
I have table on my page and i want to shorten some text inside cell(td).
As you can see i have no width parameter in css. I get this value from json and then I set it with jquery. Maybe this is the problem? If so, how can i solve it?
#myTable2 td{
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:47px;
border-top: solid 1px #ebebeb;
border-spacing:none;
cellpadding: 0;
cellspacing: 0;
font-family:arial;
font-size: 8pt;
color: #3D3D3D;
padding: 4px;
}
I test it in Chrome 19, newest Firefox and IE9..
Thanks
You need a width of the table and table-layout:fixed;
http://jsfiddle.net/CagPK/
#myTable2 td{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
#myTable2
{
table-layout:fixed;
width: 100px;
}
text-overflow works with display: block elements, while table cells are display: table-cell elements. Enclosing your text in a <div> should work (fiddle sets the width when you click on the text).