Recently I made a archive box for my blog. Firstly I use style attribute for styling my list. But when I moved the css code in style attribute to a separate css file, my JS code didn't work. The following codes work fine when click the -> button.
But when I use class of css instead of style attribute, the JS code doesnt't work. I cannot see the sub list items on the screen when I click the -> button. So I don't want to use style attribute. Because it easy to read style code from css file in my website. What can I do for handling this problem? Any suggestion?
Note: Because "insert into post" button in code snippet tool doesn't work, I put codes as images into my post.
It's because you're checking the style attribute, which you're not setting anymore. Just assume that the thing is not visible when you don't see a value since that's the default.
if (!months.style.display || months.style.display == "none") {
months.style.display = "block";
}
After the first click the style attribute will have a value and it should work.
Related
I must work on Oracle MaxyMiser for make some changes into one site.
I've already tryied to modify the Html and it's more or less clear for me how make change from this section. Now I see there is another section inside the Maxymiser panel for make some changes. This section is the script section. I don't understand how this section works. I tryied to change one css property of one html div without succes.
This is how I try to change one proprety:
var salesAmount;
salesAmount = jQuery('#regionForm')[0];
console.log(salesAmount);
console.log(salesAmount.style.display); --> ""
console.log(salesAmount.css); --> undefined
//salesAmount.style.display = "block"; --> doen't work
});
Here I tryied to change the css display property without success ( the div already have one property display:none setted from the original css rule ).
I would like to open one modal already present into the html from one script and chage some css class or properties.
Can someone help me?
Thanks.
After several tests I was able to add a custom script from the appropriate section.
In order to connect a click action to a custom button added via a variant of MaxyMiser I had to work through the window.onload function.
An example of js I added:
//insert script code here
window.onload = function(){
const btn_close = document.querySelector(".class-button");
const banner = document.querySelector("#idDiv");
btn_close.addEventListener('click', function(){
banner.classList.add('hidden');
},false);
};
I hope this can help someone.
Bye
I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.
It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.
This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");
To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;
I am actually trying to develop a Firefox Plugin. And I need to Dynamically Change The CSS of the Icon.
How do I do that for this CSS
#sample-button {list-style-image: url("chrome://sample /skin/sample24.png");}
toolbar[iconsize="small"] #sample-button {list-style-image: url("chrome://sample/skin/sample16.png");}
I want to change the CSS of toolbar[iconsize="small"] #sample button.
I can change the css of sample button by simply doing
document.getElementById("sample-button").style.listStyleImage = url('chrome://sample/skin/sample_change24.png')
But I don't knw how to do it for the second part that is in square brackets [].
Waiting for The Answer,
Thanks
You can use querySelector:
document.querySelector('[iconsize="small"] #sample-button').style.listStyleImage = '...';
I'm trying to detect if a class is present and, if so, set the background attribute of another element. This is what I have but it's not working.
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
BTW - My next step is for this to detect it whenever the ID "slider-banner" changes, but so far I can't even get it to work once on page load. Any help would be greatly appreciated... Thanks!
EDIT: I changed from .attr to .css as instructed. Makes sense... but still not working. I've tried adding console.log message within the IF statement and got nothing also. Does that give anyone any more ideas?
Example HTML where class changes:
<img id="slider-banner" class="living-nutrients" src="[image path]">
Example HTML where I want to change background image:
<div class="home-middle-one-third" id="home-middle-first">
</div>
UPDATE:
For everyone who said it "should work"... you are right! Turns out that, as written, it doesn't like being in the footer of the page, but when I moved it to the head, presto!
The final piece of this puzzle is to have it detect and evaluate based on the #slider-banner changing, (or more accurately, which class is present for the ID'd area), not just the page loading, as is currently.
The ID is for one element of a slide within a slider. There are three possible classes I could assign to the ID depending on which slide is visible. So I need the script to evaluate every time a slide changes.
Any ideas? Thank you all!
background-image is a element's style property, not its own one.
So .css("background-image","[path to new background image]");
Almost!
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
css is the correct function to set a CSS attribute.
The attr will set an HTML attribute. <div attr='attr value'>
Edit
I'm kind of guessing about the functionality of your script here in the following example.
When you set the background-image of a HTML node, that's all it does is set the background image. You must also set the width and height accordingly, to all the node to be large enough to even see the background of the node. Background images will not automatically resize the node.
var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css({
"background-image":"url("+slider.attr('src')+")", // url() for good meassures
//"background-image":slider.css('background-image'), //try this if that doesn't work
"height":slider.height(),
"width":slider.width()
});
}
Here is a working example.
Try this
jQuery("#home-middle-first").css("background-image","url([path])");
I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..
What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>
You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.
Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.
As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.
For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage