Viewing "Back to last page" button/command
"Back to last page" button/command
|
User: Christopher 9 years ago
|
|
|
I have an instance where I'd like to add this "⇚", enlarged and maybe styled, as a 'back to the last page' button for a mobile site. I've tried doing this with EW, linking, and adding "java script: history.go(-1)" as the URL. But it's not working. I've posted about this in the bugs section (as it works on other pages but prevents me from doing the same now). What would be the html snippet code and CSS to perform the same function? I tried this, for the HTML, but it didn't work... :( <a class="goback" href="java script: history.go(-1)" >⇚</a> ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Paul-RAGESW 9 years ago
|
|
|
What do you mean by didn't work? What went wrong?
------------------------------- Paul EverWeb Developer |
|
|
User: Roddy 9 years ago
|
|
|
Since you are using this on a mobile website you are quite right to create the link using CSS and HTML rather than use an image. It needs to be a button at least 30px high to make it an easy target for fingertips. Never use text hyperlinks on a smart phone website! Here's how to create the button and style it… http://everwebcodebox.com/links/goback.html Increase the height to 30px or more by increasing the value of top/bottom padding - after setting the font size. The height is roughly equal to font size + top padding + bottom padding. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 9 years ago
|
|
|
I don't want a button. I just want the arrow with the 3 lines. It's a good alternative to the nav icon if positioned and styled to the same size and colour. I've tried amending the code a few different ways but I can't get it to work or style correctly! Argh. This is what I'm trying: <a class="goBack" type ="button" onclick="history.go(-1)">⇚</a> CSS: <style type="text/css"> /* goBack */ a.goBack { width: auto; font:72px 'Verdana', Helvetica, sans-serif; /* Font size and family*/ color:#CC0000; /* Font color */ text-decoration: none; /* Removes the underline */ background: none; /* Background color */ margin:0; padding: 0px 0px; border: 0px; } </style> ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Jumbo T. 9 years ago
|
|
| Paste the code in a HTML Snippet! | |
|
User: Roddy 9 years ago
|
|
|
SImple is best. Try this… <a style="font-size:80px;color:#CC0000;margin:0;padding:0;line-height:20px;cursor:pointer" onclick="history.go(-1)">⇚</a> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 9 years ago
|
|
|
Quote: Jumbo T. - 04/11/2014 12:01:54 Paste the code in a HTML Snippet! Where else would I paste it? ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Christopher 9 years ago
|
|
|
Brilliant. Thanks Roddy
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Christopher 9 years ago
|
|
|
Roddy, I'm trying to make a button now using the code on this page. I can't get the CSS to affect it in any way. The only thing I can change is font and size. Not colours or anything else. Also, I'd love to add a background gradient with #333333 top, #000000 bottom. Here's the code I'm using. Thanks in advance! HTML: <button class="photoAlbum" type="button" onclick="http://cleetche.com/the-gallery/beach-hawkers-photos.html">PHOTO ALBUM</button> CSS: <style type="text/css"> button.photoAlbum{ width:auto; font:16px Verdana, Helvetica, sans-serif; /* Font size and family*/ color:#FFCC33; /* Font color */ background:#333333; /* Background color */ margin:0; padding:5px 10px; /* First value is top/bottom padding & the second is left/right. Increase/decrease as required */ border:none; -moz-border-radius:7px; -webkit-border-radius:7px; /* Corner radius. Change all three values */ border-radius:7px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; /* Box shadow radius and color */ box-shadow:0 0 5px #000; cursor:pointer; } </style> ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Jumbo T. 9 years ago
|
|
|
Did this : http://www.google.com/search?q=css+gradient+button Found this : http://cssgradientbutton.com/ |
|
|
User: Roddy 9 years ago
|
|
|
<style type="text/css"> button.photoAlbum{ width:auto; font:16px Verdana, Helvetica, sans-serif; /* Font size and family*/ color:#FFCC33; background:#222222; /* Background Fallback color */ background:-webkit-linear-gradient(top,#333333,#000000); background:-moz-linear-gradient(top,#333333,#000000); /* Background Gradient */ background:-ms-linear-gradient(top,#333333,#000000); background:-o-linear-gradient(top,#333333,#000000); margin:0; padding:5px 10px; border:none; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -moz-box-shadow:0 0 5px #000; -webkit-box-shadow:0 0 5px #000; box-shadow:0 0 5px #000; cursor:pointer; } </style> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 9 years ago
|
|
|
Thanks Roddy. Jumbo, I do try to find the answers myself but sometimes spend hours getting nowhere when it's much more efficient to just inquire here. I did manage to centre the button within the html snippet myself by adding/modifying this: display:block; margin:0 auto; So bravo to me! ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Christopher 9 years ago
|
|
|
My buttons no longer work. Is it because I used the same styling for different buttons? In other words, I created a CSS style for Button1 and added it to the Head Code on the site's main page. I assume I can then use that for different buttons with html like this: <button class="Button1" type="button" onclick="http://m.cleetche.com/beach-hawkers">SEE FULL MOVIE</button> <button class="Button1" type="button" onclick="http://m.cleetche.com/gallery-beach-hawkers">VIEW PHOTO ALBUM</button> CSS intro: <style type="text/css"> /* BUTTON #1 */ button.Button1{ It doesn't matter if I add .html to the link. The styling works. The action doesn't. This is the error I'm getting: SyntaxError: Unexpected token '}'. Cannot parse statement. Here's a link to one of the mobile pages. Happy New Year! ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Jumbo T. 9 years ago
|
|
|
The onClick code you use does not work because there is no java script to execute. Use this : onClick="java script:location.href='http://m.cleetche.com/gallery-beach-hawkers';" And if you're obsessed with download speed and file size, you can save precious bytes by using this : onClick="java script:location.href='/gallery-beach-hawkers';" You can find this and much, much more on the internet if you bother to search for answers. PS: java script is one word. No space. Last edit 9 years ago |
|
|
User: Christopher 9 years ago
|
|
|
It worked. Thanks. Strangely enough, it used to work without the java script execution too. But glad it's working now.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
| Post Reply |
| You must login or signup to post. |