Solved

create bookmarklet in safari

Posted on 2014-03-19
8
375 Views
Last Modified: 2014-03-24
It was suggested I create a bookmarklet for this site, http://lab.maltewassermann.com/viewport-resizer/

The goal is for this to be a tool I can click on in safari while working on beta responsive sites to quickly see how they respond.  However, I can't figure out how to do this.  I can save it as a bookmark (not bookmarklet) but that doesn't do me any good because when I go to another website, I lose this bookmark.  Hence, the need for a bookmarklet.  Any ideas?
0
Comment
Question by:nsitedesigns
  • 4
  • 3
8 Comments
 
LVL 10

Assisted Solution

by:EdTechy
EdTechy earned 400 total points
ID: 39940182
Follow your link to the site. You will see a blue box that says "Click or Bookmark" Make sure your Favorites Bar is showing - View>Show Favorites Bar. Click on the box and drag to your Favorites bar.
0
 

Author Comment

by:nsitedesigns
ID: 39940343
i have safari.  They don't have favorites.  I did save as a bookmark but again, when i visit another site, i can't go back to this test tool site to view  how it looks on various devices because I left that site!
0
 
LVL 6

Assisted Solution

by:Craig Kehler
Craig Kehler earned 100 total points
ID: 39940419
A bookmarklet contains some javascript that could measure your page load time, so you would have to generate that javascript or use one that someone has already created. However I highly recommend using something like the network tab in Google Chrome to see a waterfall graph of what requests are taking a long time. To do so, open the URL you are interested in, hit F12 (Windows/Linux) or command+option+I (Mac) and select the network tab, then fully reload the page (Control+Shift+R or Command+Shift+R). This will show you what the page load looks like for a first time visitor. If you want to test how well you are caching, then just refresh the page without the control refresh, 304 responses are cached.

If you want to dig deeper or get suggestions on optimizations install Google's Page Speed extension.

Also bear in mind if you are on the local network that is hosting the site, you will see much faster times than someone accessing the same site from the web depending on their connection speed etc. So if you have a large un-optimized image, it might load fast locally but very slow for a user with a slower connection. In that waterfall graph you can see the size of the content and PageSpeed will identify un-optimized images.
0
 
LVL 10

Assisted Solution

by:EdTechy
EdTechy earned 400 total points
ID: 39940506
What version of Safari are you running? In both 6 and 7 there is a Favorites bar. It is the bar at the top of the page to put most used bookmarks. Chrome and FF call it the Bookmarks Bar.
Drag the blue box (see attached) to the bar? Bookmarking the page will not work(as you know).
Now when you go to a page, you can click on the toolbar icon and it will run the Javascript.
Screen-Shot-2014-03-19-at-2.05.1.png
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:nsitedesigns
ID: 39940670
i am running safari 5.5.1.  I don't think I  download newer versions because  I have a mac osx  10.6.8.  So, that is probably why I am having problems.  When I check for software updates, Safari doesn't pop up.
0
 
LVL 10

Assisted Solution

by:EdTechy
EdTechy earned 400 total points
ID: 39940755
View>Show Bookmarks Bar
I tried it and it works with Safari 5
0
 

Author Comment

by:nsitedesigns
ID: 39940761
Yes, I can see the bookmarks.  That is not the problem.  I need to create a bookmarkLET which is different from a bookmark  At least, that is what my research has told me.
0
 
LVL 10

Accepted Solution

by:
EdTechy earned 400 total points
ID: 39940809
Go to the site you listed in your original post, drag the Blue box (this is the the bookmarklet on this site, it is already created) to the bookmark bar. You will then have an icon called Resizer on the bookmark bar. That is your Bookmarklet. When you go to a different page and then click on the Bookmarklet, it brings up a toolbar at the top of the page that gives you options such as changing the size of the page to see what the page looks like on a different size device.
It appears to be a bookmark but it acts differently.
From what I understand, this is what you want.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now