This time, it's a little bit different from my previous posts. So I decide to make a new one.
FYI, I use Lightbox plugin from this:
http://leandrovieira.com/projects/jquery/lightbox/
ePC.html = contain an image with lightbox effect (work with IE, Chrome, Firefox).
reviews.html = Home page. connect to scripts/script.js. (Contain the .load() function, loading ePhone.html or ePC.html by clicking on one of those 3 links). Please Ignore "ePhone.html".
Below is the scripts/script.js file:
$(document).ready(function() {
//ePhone link is clicked. Open ePhone.html PLEASE IGNORE THIS LINK.
$('#linkEPhone').click(function() {
$('#apDiv2').load('ePhone.html');
});
//ePC link is clicked. Open ePC.html
$('#linkEPC').click(function() {
$('#apDiv2').load('ePC.html', function () {
$('a[#rel*=lightbox]').lightBox();
});
});
//ePC2 link is clicked. Open the <div> section of ePC.html. The image is located inside the <div> section.
$('#linkEPC2').click(function() {
$('#apDiv2').load('ePC.html #content', function () {
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
});
The problem is with the third one above:
$('#apDiv2').load('ePC.html #content', function () {...
'#content is id. ANd the picture is within the tag within "ePC.html"
<div id=content>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
It WORKS 100% on Chorme and Firefox but NOT Internet explorer 8!!!!. (I understand why people hate IE now..)
IE crashed!. I later fixed this crashing problem by removing the !DOCTYPE..within "reviews.html"
Ok with !DOCTYPE removed, IE doesn't crashed anymore. HOWEVER, the lightbox CSS DOES NOT APPLIED to the image!
Other methods that I have tried but didn't work:
*1. "live" instead of "load":*
$('#linkEPC2').click(function() {
$('#apDiv2').live('load', 'ePC.html, #content', function(){
$("head").append($("<link rel='stylesheet' href='css/jquery.lightbox-0.5.css' type='text/css' media='screen' />"));
$.getScript('js/jquery.js', function() {
$.getScript('js/jquery.lightbox-0.5.js', function() {
$('a[#rel*=lightbox]').lightBox();
});
});
});
});
This one doesn't work at all. Even the image is not there at all.
So I guess I may stick with the "load()" function instead.
2. I've also tried putting these 3 lines into the div section:
<div id=content>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<a rel="lightbox" href="images/bird.jpg"><img src="images/bird_s.jpg" width="72" height="72" alt="" /></a>
</div>
but it doesn't work neither..
I had the same problem and noticed a few things about the jQuery load in IE:
It doesn't accept the syntax of 'load("href selector",function()...' (while chrome and FireFox do accept this syntax).
The loaded html should not include tags.
Related
I have a div tag in my webpage
<div id="editor1" name="editor1" contenteditable="true">
{!! $post->post !!}
</div>
When I click on the content of this div, a CKEditor Toolbar appears automatically. I tried to disable this Toolbar. I tried the following but could not be able to.
Try 1 :
<script>
$(document).ready(function() {
CKEDITOR.disableAutoInline = true;
});
</script>
Try 2: In the CKEditor config file
config.disableAutoInline = true;
What is my wrong? I am searching at Google, Stakeoverflow for several hours but not finding any solution. May I be helped by anybody?
Note that:
In the Page Header I added
<link rel="stylesheet" href="http://localhost/ewt/resources\assets
\ckeditor\plugins\codesnippet\lib\highlight\styles\magula.css">
and in the Footer I added
<script src="http://localhost/ewt/resources/assets/ckeditor/ckeditor.js"> </script>
<script src="http://localhost/ewt/resources/assets/ckeditor/adapters
/jquery.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
I had the same problem, for me it started working when I set the disableAutoInline outside of document.ready:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
$(document).ready(function () {
...
}
</script>
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html
I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
....
<script type="text/javascript">
$("img").lazyload({
placeholder : "/mgr/images/spinner.gif"
});
</script>
....
</head>
<body>
<div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
<g:each in="${Friends}" status="i" var="Friends">
<img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
</div>
This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?
thanks for your help
jason
Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.
Change:
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
To:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>
I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.
jQuery 1.6.4 from Google CDN.
jQuery 1.6.4 from jQuery's CDN.
Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..
to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new html
> $('.lazy').Lazy({
> chainable: false,
> enableThrottle: false,
> onFinishedAll: function () {
> // do what you need ajax call or other
> },
> beforeLoad: function () {
> // do what you need ajax call or other
> },
> afterLoad: function () {
> // do what you need ajax call or other
> },
> onError: function () {
> console.log('could not be loaded');
> }
> });
I have the following code for a simple jQuery UI dialog box. When I place this on a webpage, it works beautifully. However, If I call I insert this code dynamically onto a page using an AJAX function, it doesn't work and the dialog div just appears on the page. Is there any way to make it work in dynamically inserted code?
File DialogBox.html:
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
File index.html (calls DialogBox.html):
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: "DialogBox.html",
success: function(html){
$("#SpanID").html(html);
}
});
</script>
Does this work better for you?
$("#SpanID").load("DialogBox.html");
In addition to being shorter, it should also allow the loaded JavaScript to be run. More info here: http://docs.jquery.com/Ajax/load