Archive for the ‘Javascript’ Category

Create Next Previous Javascript Bookmarklet for Slideshow Tutorial Ebook sites

Monday, March 8th, 2010

Recently I was browsing http://talks.php.net. There were bunch of slideshows about php. I work on PHP most times. So It was good for me.
The problem arise when I saw some slide shows didn’t rendered correctly in html. so there was no next, previous button. I had to change the urls to navigate next, previous pages.
Most urls were in the format http://domain.com/path/slideshow/1, where 1 is the page number. Changing it to 2 led me to the 2nd page of the sildeshow.
I wanted it to make automated. Via javascript obviously ( being a big fan of JS).

So I made two Javascript bookmarklet button. So when you click the Next button, it will go to next page. And same for Prev button.
Following are the buttons. All you have to do is just drag those button to your Browsers Bookmark bar. Thats it!

Next Page

Prev Page

Note: Not all the urls will work. See below to get more idea.

  1. http://domain.com/path/slideshow/1 Will work
  2. http://domain.com/path/slideshow/1.html Will not work
  3. http://domain.com/path/slideshow/1.php. Will not work
  4. http://domain.com/path/slideshow-1. Will work
  5. http://domain.com/path/slide-2/show Will not work
  6. http://domain.com/path/slide-2/show.php Will not work
  7. http://domain.com/path/slide-2 Will not work
  8. http://domain.com/path/slideshow#1 Will work ! !

Sometimes those buttons discussed above may not work, eg, Manual, ebook etc sites. In that case use the following two buttons.
These are quite handy if you are browsing a site where next page cannot be guessed from url.

Next URL

Prev URL

Here is the code

Next Button:

var e=document.getElementsByTagName("link");
var g="getAttribute";
var l=window.location.href;
for(i=0;i<e.length;i++){
    r=e[i][g]("rel").toLowerCase();
    h=e[i][g]("href");
    if(r=="next"){
    l=h;
    break;
    }
}

Previous Button:

var e=document.getElementsByTagName("link");
var g="getAttribute";
var l=window.location.href;
for(i=0;i<e.length;i++){
    r=e[i][g]("rel").toLowerCase();
    h=e[i][g]("href");
    if(r=="prev"){
    l=h;
    break;
    }
}

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Ping.fm Post to StumbleUpon

Posted in Javascript | No Comments »

Internet Explorer : ”Operation aborted” Solution

Saturday, January 26th, 2008

If you ever worked with heavy JS codes or complex DHTML you may have already faced this error. This is like a nightmare. You are opening your web page. IE is loading the site. You see the progress bar. Suddenly you see a message “Internet Explorer cannot open the Internet site http://<Web site>.com. Operation aborted”. The dialog has only one button. so you press it. Then it shows “Page cannot be displayed”. You cannot even debug it. Cause you don’t see any source code. I searched many sites and forums. No one can say anything appropriately. See the MSDN site. They have some tips to avoid it. I don’t know how to reproduce it. But I’ll tell you a solution that worked for me. This solution works for me for jQuery javascript library.

In jQuery most initial operations are writen in domready block. That is,

jQuery(document).ready(

function(){

my_blah_blah_code();

}

);

The function there my_blah_blah_code() runs when DOM is ready. It means when all the elements is loaded in browser and its safe to manipulate it .

But I have seen its really not safe to manipulate it if we use the function jQuery(document).ready() block. You’ll say “No, its working for me”. Well then your lucky that its working. DOM also gives you a attribute in ‘body’ element. The ‘onload’ attribute. It always works. I never see it fails. Both ‘jQuery(document).ready()’ and ‘onload’ attribute gives the same functionality. But they are not same. To test it run a code like the following.

&amp;lt;script src="/path/to/jquery" type="text/javascript"&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;script type="text/javascript"&amp;gt;

jQuery(document).ready(

function(){

alert("jQuery domready fires");

}

);

&amp;lt;/script&amp;gt;

You’ll see which alerts later. Its the browser. See the live example here. So its safer to use ‘onload’. Thats why I am using here only ‘onload’. No jQuery(document).ready() block. I am replacing the jQuery ready block by this,

<html>
<head>
<script type="text/javascript" src="/path/to/jquery"></script>
<script type="text/javascript">
function by_blah_blah_code(){
// Write all your initialization code here.
}
</script>
<body>
<script type ="text/javascript" >
if(document.body){
 if(document.all){
 document.body.onload = by_blah_blah_code;
 }else{
 document.body.setAttribute("onload","by_blah_blah_code()");
 }
}else{
 alert("This code must be included after the body tag ;) ");
}
</script>
</body>
</html>

If you use it that way. You wont see any “operation aborted” error.

Best of luck.

© 2008 by A K M Mokaddim

Post to Twitter Post to Delicious Post to Digg Post to Facebook Post to Ping.fm Post to StumbleUpon

Tags: , , , , , ,
Posted in Javascript, Tips | 11 Comments »