Im trying to get jQuery to run in IE8 so i created the example to test.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test jQuery</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").css("background", "red");
});
</script>
</head>
<body>
hello
</body>
</html>
It works fine in IE6, IE7 and IE9+ however just does not work in IE8, Any ideas?
Here, mainly you need to add !important
Add background-color: red !important; as say for example _bgcolor class in css and add that css _bgcolor class in javascript as following:
$(document).ready(function(){
$("body").addClass('_bgcolor');
});
Just add"http:" before the url start.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
In Jquery css official documentation I found:
Retrieval of shorthand CSS properties (e.g., margin, background,
border), although functional with some browsers, is not guaranteed.
For example, if you want to retrieve the rendered border-width, use:
$( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth"
), and so on.
Blockquote
try $("body").css( "background-color","red" ) and $("body").css( "backgroundColor","red" ).
Related
See this fiddle. I have an info var that I can easily append to 2 places. But I'd like to also easily remove it from both places without doing something more complicated like $("p").remove()
I know this seems super not complicated, but in production it's harder. I'm always working with the info var so it'd be great if there was some way to say info.removeInAllInstances() or something
I'm not a master in JQuery, but apparentely remove() removes all instances of something. You could filter by an specific class and remove the paragraphs.
Look this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove demo</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove();
});
</script>
</body>
</html>
I get it on https://api.jquery.com/remove/.
Hey fellas and ladies,
I'm having an issue applying the following css rule.
$('#bam').css({"-webkit-overflow-scrolling": "touch"})
Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.
However if I do the the same syntax and change color it works.
As a use case im trying to fix an issue with an iphone iframe overflow problem see iframe size with CSS on iOS for my current issue and Im not in a position to use inline styles or external css.
Any ideas :)?
Added jsbin example.
https://jsbin.com/vizacezeva/edit?html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#bam').css({"overflow-scrolling": "touch"})
console.log('hi');
console.log($('#bam').css("overflow-scrolling"));
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="bam" style="width:100%; padding:0px;">
<iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;">
</iframe>
</div>
</body>
</html>
Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style.
/** style.css **/
.foo { -webkit-overflow-scrolling: touch; }
// app.js
$('#bam').addClass('foo');
EDIT: Thanks for the suggestions everyone. I've gotten it squared away thanks to your help!
I am doing javascript/jquery tutorials on codeschool/codeacademy and everything seems to go fine there. But when I try to do something myself, I cannot get the javascript to actually trigger. I tried chrome and firefox. I disabled all plugin extentions. Must be a simple problem, please help!
The following code I cut and pasted from jquery (http://learn.jquery.com/about-jquery/how-jquery-works/)
Here is a link to the jsfiddle: http://jsfiddle.net/interestinall/n5mqryrj/
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
It does not work for me. Can someone explain why and tell me how to get it working? Thanks so much!
Theres nothing wrong with your code. We were all started somewhere and some of these suggestions are misleading
If you're not already aware, jQuery is a comprehensive library which makes complex javascript development simpler. Its important to note that everything you do with jQuery can be achieved using native javascript its just a little tricker and jquery handles all the complexities to work across a wide range of browsers. That is to say some things work in some browsers, where as others do things in a different way (notably IE).
To use jQuery on your website, you need to include it on your page. Its self executing and one way you can tell if its worked is running something like:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script>
console.log($)
</script>
</body>
</html>
If you open the console in chrome (hit f12) you should see:
function (a,b){return new m.fn.init(a,b)}
Note that I'm using src="https://code.jquery.com/jquery-1.11.1.min.js" for the source of the script. You can use src="jquery.js" as per your script, but it means you need to save the contents of https://code.jquery.com/jquery-1.11.1.min.js to a file called jquery.js at the same level as your index.html (or the wherever-you-saved-your-code.html)
Ive noted some suggestions say you should include jQuery in the tag and, though this would work, its considered best practice to keep scripts at the bottom of the page for reasons I wont go into here.
As such, this should work for you (irregardless of browser extensions):
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
Good luck.
You did not include jquery in your project.
change this line
<script src="jquery.js"></script>
to this line
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
or any other version in
https://code.jquery.com/
You've used the wrong URL to jquery. http://fiddle.jshell.net/_display/jquery.js gives a 404 error.
Try using an absolute URI or picking the library from the Frameworks & Extensions menu.
You haven't included your jQuery properly. Try this instead:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
jQuery
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
Try to replace
jQuery
with
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or download the jQuery-Scriptfile from jQuery.com, store it locally and use that one.
Here is a working example
http://jsbin.com/pajecubute/1/edit
jQuery
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
Updated your fiddle. You need not include JQuery separately in your HTML. It is already present for your selection on the left hand side. Your code works now.
http://jsfiddle.net/n5mqryrj/8/
Added ready function in the script section:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
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.
Hello I use javascript stylesheet object, with a specfic style and place it on dom ready. When i do exactly my code IE crash.
The problem is the UL with exactly this style set after the page is load. If I place the styleSheet.cssText = css; before the page load, everyting is correct. If i remove the char f in <DIV>f everything work. I need to use my code after the page is load. Any suggestion to pass over this trouble ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<script type="text/javascript" src="./jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
var styleSheet = document.createStyleSheet();
var css= "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
$(document).ready(function(){
styleSheet.cssText = css;
});
</script>
</head>
<body>
<DIV>f
<UL>
<LI><a>dfgfdg</a></LI>
<LI><a>fdgdfg</a></LI></UL>?
</DIV>?
</body>
</html>
The problem is IE8 specific. It seems to work on ie7 and ie9.
In order to reproduce the bug it is important to apply the stylesheet after the page is loaded.
We used jquery.ready() for this example but the code also crashes for click and load events.
This bug is very specific. It requires the precise css and html used in the example above. We have tried adding the stylesheet in different ways ( stylesheet.rules[i].lisStyleType='none' for example and adding the stylesheet in a .css file) with no success. We absolutely need to add the style dynamically where this probleme is happening.
createStyleSheet is not a cross-browser friendly solution... Try this code instead:
$(function(){
var styles = "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
});
I can't tell you exactly why IE is crashing, but this code works for me and it shouldn't trigger any unexpected errors.
I tried your code in a jsfiddle and it doesn't bug with IE7 .. what's the problem ?
What version of IE are you using ? Do you have an url of a demo that's crashing for you ? I can't reproduce your problem, please see my jsfiddle ...
Btw why do you use jquery 1.4.2 and not a more recent version ? 1.4.4 or 1.5.2 , in the jsfiddle I choosed 1.4.4
Please Try this. Tested in IE6,7,8,9 FF, Opera, Googlechrome, Safari
<script type="text/javascript">
function createRuntimeStyle(){
//create a style tag
var rStyle=document.createElement("style");
//create the content of the style tag
var cssDef=document.createTextNode(".myclass{display:block;font-family:Verdana;font-weight:bold;}");
//assign the type
rStyle.type="text/css";
if(rStyle.styleSheet){ //check for IE
rStyle.styleSheet.cssText=cssDef.nodeValue;
}else{ //check for Other Browsers
rStyle.appendChild(cssDef);
}
//append to document head
document.getElementsByTagName("head")[0].appendChild(rStyle);
}
//call to the function
createRuntimeStyle();
</script>