I have an XHTML file with an HTML5 Shiv in the head:
<!--[if lt IE 9]>
<script src='../common/html5.js' type='text/javascript'></script>
<![endif]-->
Using Nokogiri I need to adjust the path in that comment, stripping off the ../. However, any changes to the .content of the comment node results in XML output that converts the > and < to entities:
XML = <<ENDXML
<r><!--[if lt IE 9]>
<script src='../common/html5.js' type='text/javascript'></script>
<![endif]--></r>
ENDXML
require 'nokogiri'
doc = Nokogiri.XML(XML)
comment = doc.at_xpath('//comment()')
comment.content = comment.content.sub('../','')
puts comment.to_xml
#=> <!--[if lt IE 9]>
#=> <script src='common/html5.js' type='text/javascript'></script>
#=> <![endif]-->
The original source is valid XML/XHTML. How can I get Nokogiri not to convert the entities inside this comment during tweaking?
The Nokogiri docs for content= say:
The string gets XML escaped, not interpreted as markup.
So rather than using that, you could replace the node with a new one, using replace and an explicitly created comment node:
XML = <<ENDXML
<r><!--[if lt IE 9]>
<script src='../common/html5.js' type='text/javascript'></script>
<![endif]--></r>
ENDXML
require 'nokogiri'
doc = Nokogiri.XML(XML)
comment = doc.at_xpath('//comment()')
# this line is the new one, replacing comment.content= ...
comment.replace Nokogiri::XML::Comment.new(doc, comment.content.sub('../',''))
# note `comment` is the old comment, so to see the changes
# look at the whole document
puts doc.to_xml
Output is:
<?xml version="1.0"?>
<r>
<!--[if lt IE 9]>
<script src='common/html5.js' type='text/javascript'></script>
<![endif]-->
</r>
Related
I need to change the background image of a div using an onhover function.
I have tried several iterations of "document.getElementByID" without success
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src =
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
Following is the latest function I tried:
function upDate(previewPic){
document.getElementById("image").body.backgroundImage =
"url('img_bacon.jpg')";
I am expecting the div to include the background image but it does not.
Try using .innerhtml and pass in whatever you want the body to be.
document.getElementById("image").innerhtml = "<div>CONTENT HERE</div>"
This should work:
document.getElementById("image").style.backgroundImage = "url(someimage.jpg)";
You could consider using jquery.. then it would look something like this:
$('#image').css("background-image", "url(someimage.jpg)");
How do I add a comment into an XML file using Nokogiri?
For example, I have an existing html file. I want to add <!--doc-->. How should I do it so I get:
...
<body>
<!--doc-->
</body>
...
I'd use:
require 'nokogiri'
doc = Nokogiri::HTML('<html><body></body></html>')
doc.at('body') << '<!-- foo -->'
puts doc.to_html
# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html><body><!-- foo --></body></html>
Or you can use a bit longer code:
doc.at('body').add_child('<!-- foo -->')
Which results in the same thing.
It gets a little more interesting/complicated if <body> has more nodes, and you care where the comment goes, but that's still basically locating where you want the comment to be inserted, and then doing one of the above.
I use following code fix:
require 'nokogiri'
d = Nokogiri::HTML(%Q(<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
))
d.css('body')[0].add_child(Nokogiri::XML::Comment.new(d, "doc"))
puts d.to_s
Since I make website with wordpress, which is the jquery affect part not show in IE7 and IE8, read the browser error, it show: object not support this method: 'getElementsByClassName', in this case i add follow code in header.php:
<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9"/>
and to justify the browser version:
<!--[if lt IE 8]>
<script src="<?php echo get_template_directory_uri(); ?>/js/wow.js"></script>
<![endif]-->
<!--[if IE 8]><script src="<?php echo get_template_directory_uri(); ?>/js/wow_ie8.js"></script><![endif]-->
<!--[if !IE]><!--><script src="<?php echo get_template_directory_uri(); ?>/js/wow.js"></script><!--<![endif]-->
And for js file part:
I just change
wow.js
code to
wow_ie8.js
from
this.boxes = this.element.getElementsByClassName(this.config.boxClass);
to this code:
this.boxes = this.element.querySelectorAll(this.config.boxClass);
Somehow the website still show the error: object not support this method: 'getElementsByClassName'
Is anyone could give me the solution to solve this problem?? thanks a lots!!
I have the unfortunate task of making Bourbon Neat work with ie8. Thoughtbot's docs say you use Selectivizr for this. I followed Selectivizr's instructions and I see nothing different when testing in ie8. I also don't understand what if any fallback css is required. Any ideas or solutions? Most appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="description" content="">
<!-- FONTS -->
<!--Typekit - Adrianna Extended Demibold-->
<script type="text/javascript" src="//use.typekit.net/sjw4zgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- AUTO RELOAD FOR HAMMER -->
<!-- Hammer reload -->
<script>
setInterval(function(){
try {
if(typeof ws != 'undefined' && ws.readyState == 1){return true;}
ws = new WebSocket('ws://'+(location.host || 'localhost').split(':')[0]+':35353')
ws.onopen = function(){ws.onclose = function(){document.location.reload()}}
ws.onmessage = function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length;i++) {
var link = links[i];
if (link.rel === 'stylesheet' && !link.href.match(/typekit/)) {
href = link.href.replace(/((&|\?)hammer=)[^&]+/,'');
link.href = href + (href.indexOf('?')>=0?'&':'?') + 'hammer='+(new Date().valueOf());
}
}
}
}catch(e){}
}, 1000)
</script>
<!-- /Hammer reload -->
<!-- CSS/SCSS -->
<link rel='stylesheet' href='css/ostrich-sans.css'>
<link rel='stylesheet' href='css/font-awesome.css'>
<link rel='stylesheet' href='css/normalize.css'>
<link rel='stylesheet' href='css/responsive-nav.css'>
<link rel='stylesheet' href='css/style.css'>
<!-- IOS LINK STYLES -->
<style type="text/css">
/*.applelinks a {color:#c4d52d; display:inline-block; padding: 10px 0;}*/
/*Disable touch-highlight
-webkit-tap-highlight-color: rgba(0,0,0,0); */
</style>
<!-- JS MODERNIZR -->
<script src='js/modernizr.custom.87213.js'></script>
<link href="favicon.ico" rel="shortcut icon">
<link href="apple-touch-icon.png" rel="apple-touch-icon">
<title>Title</title>
<!-- ZEPTO FALLBACK TO JQUERY -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/zepto.min' : 'js/jquery.min') +
'.js><\/script>')
</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
</head>
<body>
<header>
<nav class="nav-collapse">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="sec-one">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-two">
<aside>Aside</aside>
<article>Article</article>
</section>
<section class="sec-three">
<aside>Aside</aside>
<article>Article</article>
<p>Content copy</p>
</section>
<script src='js/responsive-nav.js'></script>
<script src='js/app.js'></script>
<!-- INITIATE RESONSIVE-NAV -->
<script>
var navigation = responsiveNav(".nav-collapse", {
label: '<i class=\"icon-reorder icon-2x\"></i>'
});
</script>
</body>
</html>
selectivizr.js is dependent on jquery (or similar libraries). Make sure that you're loading jquery BEFORE selectivizr...
<!--[if lte IE 8]>
**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>**
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
Have you tried including HTML5 shiv?
Without that (or similar), IE8 won't be able to style elements that are new to HTML5 (eg. <section>, <nav>, etc). For me, selectivizr.js does indeed allow Neat to work with IE8, but if you're using HTML5 elements then even with selectivizr Neat won't be able to style them in IE8 without the HTML5 shiv. (nb. that's not actually a problem with Neat per se - it's a more general problem that stems from IE8 being a pre-HTML5 browser).
Effectively, selectivizr.js fixes the problems with selectors that IE8 doesn't recognise, while HTML5 shiv fixes the problems with unrecognised elements: if you're using HTML5 elements then in order to get everything working smoothly, you'll probably need both.
Am using jquery draggable collision plugin which throws the error on loading the page that is "Type Error i is undefined"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type= "text/javascript" src="js/jquery-ui.js"></script>
<script type= "text/javascript" src="js/jquery-collision.min.js"></script>
<script type= "text/javascript" src="js/jquery-ui-draggable-collision.min.js"></script>
<script type= "text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="header">Sprite Generator</div>
<div id="droppable" >
<div id="overLay">Drop Files Here</div>
</div>
<div id="cssDetails">
<div id="cssHead">CSS Data</div>
</div>
<div id="errorMessage"></div>
</body>
</html>
This is the code I use. Kindly help, am not aware what is going wrong here.
The error lies in the draggable collision plugin file. Each time the method .data("draggable") is called, an undefined value is returned.
There is a slight difference between jQuery UI 1.9.2 and 1.10.3. In this last version, .data("draggable") has been replaced by .data("ui-draggable").
You should :
Either use an old version of jQuery UI plugin,
or use the last version, then replace .data("draggable") by .data("ui-draggable") in the jquery-ui-draggable-collision.min.js file.
In my own case, I used the second solution. But your case may be different, since I don't know which version of jQuery UI plugin you are using now.
The README for jQuery UI Draggable Collision reads:
Load jquery-ui-draggable-collision and its dependencies:
<script src="jquery-1.8.3.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.draggable.js"></script>
<script src="jquery-collision-1.0.2.js"></script>
<script src="jquery-ui-draggable-collision-1.0.2.js"></script>
It doesn't explain why you need to load modules separately, but my suspicion is there's a conflict going on somewhere. I'd try including the specific individual files (core, widget, mouse, draggable, collision, and ui-draggable-collision) and see if that works. Without more information in your question, it's hard for me to try a set of specific things, but this may be your best bet.