I have tried google, but I can not definite answer.
I am trying to edit the styles of #sidebar:hover from mootools. My css is as follows:
#hoverzone:hover {
background: #EEE;
}
Now, I am trying to edit the background color from mootools when the page loads, to signify javascript is enabled. I know I can do:
$('hoverzone').addEvent('mouseenter', function(){
this.setStyle('background','000');
});
But I was wondering if there is a function I could call at the load of the page, that does this in one line with out the user doing anything.
Thanks
Edit: Yes, I was rushing, and anciently typed over instead of mouseenter
you cannot target a pseudo selector with javascript. so you need to create a new CSS rule that overrides the old one.
http://jsfiddle.net/dimitar/Z9RPP/
var StyleWriter = new Class({
// css classes on the fly, based on by Aaaron Newton's old work
createStyle: function(css, id) {
try {
if (document.id(id) && id) return;
var style = new Element('style', {id: id||'',type:'text/css'}).inject(document.getElements('head')[0]);
if (Browser.ie)
style.styleSheet.cssText = css;
else
style.set('text', css);
} catch(e) {
//console.log("failed:", e);
}
}
});
new StyleWriter().createStyle("#hoverzone:hover { background:red;}", "foo");
You can use the events domready or load of the windows object.
For example something like:
window.addEvent('load', function(){
$('hoverzone').setStyle('background-color','000');
});
Why use javascript. Why not just css:
#hoverzone { background: #000 }
#hoverzone:hover { background: #EEE }
Related
I am modifying some JSP files, and every time I upload a new version, if people don't update the cache, the styles are not rendered as they should be; it is looking not good and without styles applied.
To solve this problem, I have followed an example from Stack Overflow that adds a numeric value to the CSS file, preventing it from being cached in the browser. The specific link I've seen is this one:
https://wpreset.com/force-reload-cached-css/
But I've found that whenever I press F5 or navigate to other JSP's that apply the same stylesheet, the files that are part of that CSS file are always seen just before rendering. I added a GIF with a dummy example to exhibit what I mean:
Animated GIF demonstrating the problem
How could I avoid this?
Would something like the following help?
/* CSS */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
|
// Js
$(window).load(function() { // Wait for window load
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
Like it is used here.
I have already been able to solve it.
In the end I have chosen to nest inside a window.onload, the document.ready like this:
window.onload = function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
var h, a, f;
a = document.getElementsByTagName('link');
for (h = 0; h < a.length; h++) {
f = a[h];
if (f.rel.toLowerCase().match(/stylesheet/) && f.href && f.href.indexOf("custom-common.css") != -1) {
var g = f.href.replace(/(&|\?)rnd=\d+/, '');
f.href = g + (g.match(/\?/) ? '&' : '?');
f.href += 'rnd=' + (new Date().valueOf());
}
}
$(document).ready(function () {
$('.main-link').click(function () {
And change the visibility of the html document. I have omitted the rest of the code, but you can get an idea. Many thanks to Robert Bradley and Adam for shedding light and helping me.
I link to a page like page.html#id so the page is automatically focused at this id.
How do i do this in CSS that only the div with the id from the URL gets for example a yellow background?
Thanks
Use the :target pseudo selector.
http://css-tricks.com/on-target/
Get the hash value and style it using JavaScript:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //the variable without hash sign.
document.getElementById(hash).style.background = "yellow";
}
Edit - didn't know about :target. That answer is better!
You could listen for the hashchange event, detect the current hash and apply a class to the corresponding element:
window.addEventListener('hashchange', function() {
// Remove .active from any currently active elements
var active = document.getElementsByClassName('active');
for(var i = 0; i < active.length; ++i) {
active[i].classList.remove('active');
}
var id = window.location.hash.substr(1);
document.getElementById(id).classList.add('active');
});
If you need to support browsers that do not support classList, there are plenty of alternatives.
JSFiddle
I searched around on Google, here on StackOverflow, probably-now-outdated HTML5 spec's, and have not found an answer. I feel as though I'm missing something obvious.
I'm wondering if there is a way to specify when creating an HTML5 custom element, that users of that new element should (or must, to be 'valid' to the element's spec) only use it once per document?
For example with HTML's elements, 'head', 'body', 'main', etc., should only be used once within a document. I have not been able to find a way to do this with custom elements. Is this possible, either with vanilla HTML5, Polymer, or some other means?
Thanks to any who can help.
Use built-in callbacks to track the usage of the custom element:
var MyElementPrototype = Object.create(HTMLElement.prototype);
MyElementPrototype.len = 0;
MyElementPrototype.attachedCallback = function() {
MyElementPrototype.len++;
if (MyElementPrototype.len > 1) {
alert('The Document is not Valid'); // Do Something
}
};
MyElementPrototype.detachedCallback = function() {
MyElementPrototype.len--;
};
document.registerElement(
'my-element',
{
prototype: MyElementPrototype
}
);
If you just want to validate the document, you can do it easily with JavaScript.
JsFiddle: http://jsfiddle.net/4AXaS/
HTML:
<div>Lorem</div>
<div>Ipsum</div>
JavaScript:
$(function () {
if ($('div').length > 1) {
alert("Can't use this element more than once in the document");
}
});
link:http://jsfiddle.net/KM9bK/1/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($('.comprejuntoproduto input:checkbox').is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
}else{
$(".comprejuntoproduto").parent().removeClass("changeborder");
}
});
I want when .compreprodutojunto input:checkbox is checked, change the .compreprodutojunto border style.
Thanks so much
First, you need to actually include the jQuery library if you're going to use jQuery (not sure if this was a fiddle-only issue or not). If you didn't include jQuery in your actual page outside of jsFiddle, you'd do it like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
(Note, you can download your own copy if you prefer to host it yourself, or call it directly from code.jquery.com)
Also, when you call .removeClass() you can simply call it on the element that you had previously called .addClass() on, in this case <div class="comprejuntoproduto">.
See: http://jsfiddle.net/KM9bK/7/
$('.comprejuntoproduto input:checkbox').on('click', function (e) {
if ($(this).is(':checked')) {
$(".comprejuntoproduto").addClass("changeborder");
} else {
$(".comprejuntoproduto").removeClass("changeborder");
}
});
I have a Prototype snippet here that I really want to see converted into Mootools.
document.observe('click', function(e, el) {
if ( ! e.target.descendantOf('calendar')) {
Effect.toggle('calendar', 'appear', {duration: 0.4});
}
});
The snippet catches clicks and if it clicks outside the container $('calendar') should toggle.
Are you trying to catch clicks anywhere in the document? Maybe you could try...
var calendar = $('calendar');
$$('body')[0].addEvent('click', function(e) {
if (!$(e.target).getParent('#calendar')) {
var myFx = new Fx.Tween(calendar, {duration: 400});
myFx.set('display', 'block');
}
}
I'm not sure how you are toggling visibility but the way Fx.Tween.set works allows you to change any CSS property. You may want to look at http://mootools.net/docs/core/Fx/Fx.Tween for other possibilities.
Also, notice that I wrapped e.target using a $. This is specifically for IE. I wrote a post about this here under the sub-heading "Mootools Events Targets".
Lastly, I factored out $('calendar') so that you are not searching the DOM every time.