• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

Posted by Mohsin On 12/19/2013 04:00:00 PM 1 comment

This is one way to make your site more interactive so that readers can "play" with certain elements of the page being able to drag from one side to another within the container in which they are, i.e. can drag the images with a script that will allow them to move from one place to another within the blog.

Demo

You can see an example in this test blog

To create this effect on images


Login to your Blogger account, go to Template and click the Edit HTML button:


Click anywhere inside the template's code and press the CTRL + F keys to search for this tag:
</head>
Just before </head> paste the following scripts:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.easydrag.js' type='text/javascript'/>
Note: If you already have jquery, please remove the code in red.

Now when you want to drag an image, use this code inside the HTML of your post or of your page:
<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>
Change the URL of the image where is indicated, and furthermore, it is important that each image has a unique ID, in this example the ID is called easeydrag1, that ID must be twice.

If you have another picture with this effect, then you should put a different image with other ID, for example easydrag2, otherwise it will not work:
<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
<img id="easydrag2" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
$(function(){ $("#easydrag2").easydrag();});
</script>
And how do you do if you want to put a link to the image?

We will set one Javascript function, so that when we will double click on it to open the page we want.

In this case, the code you would use, would be this:
<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('link-URL')" src="image-URL" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>
With this the picture can be without any problems dragged around and can be activated by double clicking on its link.

1 comments:

Great web site. A lot of helpful information here.

I am sending it to a few buddies ans also sharing in delicious.
And naturally, thank you for your effort!

My web page - church financing

Post a Comment

All types of Comments are welcome