Why cant Safari manage this dynamic cssStyle - javascript

This seems to work OK in FF, Opera, IE (10), even chrome but safari wont have it?
<html> <head>
<style> .moveable_image {position:absolute; top:50px;} </style>
<script type="text/javascript">
function move_image() {
var image_top = 200
document.styleSheets[0].cssRules[0].style.top = image_top;
} </script>
</head> <body>
<input type='button' onClick='move_image()' value='move image'/>
<img class="moveable_image" src="f/4thumb.jpg">
</body> </html>
it works like this:
document.styleSheets[0].cssRules[0].style.top = "200px"
but not when it's calling up a 'var'?
it works calling the same var if I (could) go the name route:
document.images['moveable'].style.top = image_top;
but I need to change a whole class
here it is live: http://generationsinc.co.uk/test/safari_java_cssrule_test.html
I hope this makes sense, I've not been able to find anything covering this at all. I've even just re-installed Safari...
I realise it wont be obvious why I need to achieve this in this particular way, but that's because I've carved this annoyance out of the bowels of my project and presented it as simply as possible.
what are my options folks?
EDIT; there seems rather a lot more incompatibility on browsers only a little older... see my comments.
Is there some better way that i have missed to change a whole class of elements dynamically?
or simply a whole bunch of elements somehow?

You can use jquery to set css property top: 200px;. See this code-
<!DOCTYPE html>
<html> <head>
<style>
.moveable_image {position:absolute; width: 100px ; top:50px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function move_image() {
$('.moveable_image').css({"top":"200px"});
} </script>
</head> <body>
<input type='button' onClick='move_image()' value='move image'/>
<img class="moveable_image" src="Tupils.jpg">
</body> </html>
This is working for IE, Chrome and Safari.

Related

document.getElementsByTagName returning undefined on placing the script after body

I know that this is a frequently asked question.
I have tried all the methods like using onload() for body tag,
placing the script after the DOM elements and using self invoking function.
Yet I get that my element is undefined.
P.S: document.getElementsByTagName('') replaced with document.getElementById('') works fine. Why is that? Please explain both of my doubts. Here is my simple code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="loadHandler()">
<p>Drag me!</p>
<script type="text/javascript">
function loadHandler() {
document.getElementsByTagName('p').setAttribute('draggable', true);
}
</script>
</body>
</html>
getElementsByTagName (as the name suggests) returns an array of elements. If you want the first one, take the first one.
.highlight{ color: red}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="loadHandler()">
<p>Drag me!</p>
<script type="text/javascript">
function loadHandler() {
var elem = document.getElementsByTagName('p')[0];
elem.setAttribute('draggable',true)
elem.classList.add('highlight');
}
</script>
</body>
</html>
As for why dragging is not working, perhaps the documentation might shed some light
By default, only text selections, images, and links can be dragged. For all others elements, the event ondragstart must be set for the drag and drop mechanism to work, as shown in this comprehensive example.
getElementsByTagName returns array of results, not just a single result like getElementById. Try to use getElementsByTagName('p')[0].

Show & Hide an element after click

What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.

why doesnt this animate() jquery function script work?

I'm trying to test out how the animate() function works, and this is an example I got from stackexchange actually (it works on fiddle), but when I run it on my local computer, it doesn't work anymore.
Here's the code:
<html>
<head>
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function () {
$('div').animate({
width: 'toggle'
});
});
alert("hei");
});
</script>
<style type="text/css">
div {
background-color: red;
height: 100px;
width: 100px;
display: none;
}
</style>
</head>
<body>
<button>Show/Hide</button>
<div></div>
</body>
Why is this? When I refresh, there's no alert popping up so it's not even processing the javascript I have in there. But it works fine in fiddle.
Oh, and here's the fiddle. But I really don't think it's relevant since it works there, just not on my local computer. Am I missing declaring a library?
Please change below line :
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
with this one :
<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
You have used backslash instead of slash
It work For me
I think your jQuery path is not correct you have used
scripts\jquery-1.11.0.js
normally we used scripts/jquery-1.11.0.js
scripts\jquery-1.11.0.js should be scripts/jquery-1.11.0.js

First opportunity for document.body.appendChild

I am looking for the first opportunity to call document.body.appendChild to attach an element. I am currently using onload of body but as I understand it this waits until images and subframes load before triggering.
I require only that the solution work in IE (this is for an IE specific demo), but believe in the importance of giving cross-browser answers for other people to reference, so points if you give both.
Below is an illustration of what I am already doing.
<html>
<head>
<title>Insertion</title>
<script type="text/javascript">
function insertStuff() {
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
}
</script>
</head>
<body onload="insertStuff()">
</body>
</html>
<html>
<head>
<title>Insertion</title>
</head>
<body>
<script type="text/javascript">
function insertStuff() {
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
}
insertStuff()
</script>
<!-- Here goes all the other elements -->
</body>
</html>
This would be cross browser and work for IE6 and above for sure. Not sure about anything below that

CSS :after fails in IE8, but only after adding a reference to jQuery

It's taken me a few hours to track this issue down and I'm a bit shocked by what I am seeing.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
a:after {
content: attr(data-content);
}
</style>
</head>
<body>
<a id="targetElement" href="http://www.google.com">Hello World</a>
</body>
<script type="text/javascript">
document.getElementById("targetElement").setAttribute("data-content", "moo");
</script>
</html>
The above example works appropriately in IE8. When viewed, the word 'moo' is appended to the end of targetElement:
Now, lets spice things up a little bit by reference jQuery via the CDN. Add the following line of code:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script>
such that the entire example reads as:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
a:after {
content: attr(data-content);
}
</style>
</head>
<body>
<a id="targetElement" href="http://www.google.com">Hello World</a>
</body>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
document.getElementById("targetElement").setAttribute("data-content", "moo");
</script>
</html>
refresh IE8 and observe that the word moo has been dropped, but the element retains its data-content attribute:
I... I don't understand. I thought jQuery was supposed to be helping me out with cross-browser compatibility... but here it is wrecking shop.
Any ideas on how I can trouble shoot this? Or work around?
Alright! I spoke with Joseph Marikle in chat and we worked through a large amount of examples attempting to track down the issue.
I have good news and I have bad news. The bad news first -- I don't know exactly what the hell is going on. The good news? I've got work arounds!
So, first off, if your element is on the page at design-time (not dynamically generated) then, as long as the element's attribute exists, the css should work.
E.g.:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
a:after {
content: attr(title);
}
</style>
</head>
<body>
<a id="targetElement" title="hi" href="http://www.google.com">Hello World</a>
<script type="text/javascript">
document.getElementById("targetElement").setAttribute("title", " moo");
</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
</body>
</html>
This example works because targetElement has the title attribute defined. The title is set to moo at run time and the css reflects this by showing content as 'moo.'
If you remove the code title="hi", you will not see moo. FURTHERMORE, if targetElement is not on the page when the css is ran -- you will not see moo -- even if you generate targetElement with the title attribute existing.
If you want to dynamically generate your elements and have this css still work... I have a second workaround for you and this is the one I am currently using. The issue seems to be that IE8 isn't finding the element when it applies pseudo-selectors and it doesn't re-run its logic when the element shows up.
So, if you do something like..
node.children('a').attr('data-content', '[' + usedRackUnits + '/' + rackTooltipInfo.rackModel.rows + ']');
var addRule = function (sheet, selector, styles) {
if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
if (sheet.addRule) return sheet.addRule(selector, styles);
};
addRule(document.styleSheets[0], 'li[rel="rack"] > a:after', "content: attr(data-content)");
This will modify your stylesheet at runtime and add a new CSS rule. This causes IE8 to re-apply the logic and, because the dynamic elements are on the page now, it finds them and applies the css appropriately. Woohoo! Stupid IE8.

Categories

Resources