Hello I am currently look for solutions for keeping my scroll position on page load and I found this page ( http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/ ). Its javascript to keep scroll bar location on page load, but I just cant seem to get it working after looking through the page source and trying different things for a while (im not very experienced with JS) Could someone check this out and see if they can break it down a bit more for me ?
Thanks!
Seems like this git page comments the script a bit more.https://gist.github.com/ohaal/6882141 I'll give you an update when I have applied this to my own site. Probably I can give you a better explanation. What first comes in mind is that you need to set a ID by the latest script explained in the git page above.
// Example of applying sneak to a link:
/*
(function() {
var sneaky = new ScrollSneak(location.hostname);
document.getElementById('sneakytest').onclick = sneaky.sneak;
})();
*/
Related
First off, I am sorry in advance- anyone who reads this is going to hate me.
So, I am currently finishing a webpage for a client. Things are going decently, except I'm having a bit of an issue with the positioning of an element. There is a little contact box that is supposed to slide in from the side when you click on it. The issue is that I basically have had my hands tied, and I have to use wordpress for this page, and this contact box is a plugin that the original author of this page chose. For some reason- this contact box always ends up behind other elements. I tried setting the z-index in the source code of the plugin by finding the name of the variable that is supposed to hold the instance of the slider- and I could not get anything to work (partially because I havent used jquery in a while, and, this isn't my plugin). I tried using the .zIndex function, but, it kept throwing errors. So, I went to CSS. I got the IDs of the wrapper and the actual box itself, and set their z-index to 100. This did nothing, which has left me stumped. Unfortunately, I can only provide links to the site, and a pastebin of the plugin's code- since the source code for the website is huge... and I also dont actually have access to the server- only the WordPress admin page (which doesnt allow me to edit the source of pages)
http://pastebin.com/NX8AnB16 - pastebin of the plugin source
http://buyinghouseinusa.com/ - the site i am currently trying to finish
If anyone could help me figure out what I need to apply the z-index to to make the stupid contact form stay on top, I would be very greatful. I apologize for the inconvenience of not having the actual code offhand (with the exception of what the browser can show me)
z-index only applies to positioned elements.
Then, in order to make div.dwp-contact-wrapper{z-index: 2000} work, you need
div.dwp-contact-wrapper {
position: relative;
}
Similar questions, if not exact questions like this have been asked but not often and the answers I have tried to alter with but have had no luck what-so-ever.
Basically, I want to be able to make the content part of my page (so the header remains on each page) change and I'm not sure if this is with anchors using only one html page or if it's multiple html pages or really how it's done at all. Been looking for over 5 hours but to no avail.
I came across this site looking for an answer and it has exactly what I am looking for http://www.aivahthemes.com/themes/gracious/index.html
I looked everywhere and found sites where it did similar things but if you went right by two pages and then went back to the original page, you would see the middle page on the way back. That site above does NOT do this and actually hides the pages between links somehow which is amazing.
This is a bit vague as I havn't posted any code but literally all the code I tried was just from previous questions and it was just me trying to adapt half-answers to what I wanted.
Any help is greatly appreciated, I'm stumped!
Edit:
*Looked a bit more into detail, does look like one whole single HTML page. Why was it so quick to load though if it was an entire page? Thought that would have been a long process.
Edit2:
*Is it also possible to achieve this 'style' by doing it vertically?
The site you listed uses hashes in the URL. You can add them dynamically with javascript or just by using plain anchors. Hash in the url will save it in the browser history and the back/forward buttons will work fine. The only tricky part is reading the hash, which is pretty much straight forward with window.location.hash - it returns everything after '#' sign.
The script for animation/getting pages would be a little bit more complex, but as I see it's all based on getting the right <div id="HASH_FROM_URL">, moving it to 'left: -9999px' and then animating to main container's offsetLeft.
Ok so here goes.. I'm totally new to Javascript. I only started on html&css about a month ago. All my htl and css is probably pretty backward and i've got a stack to learn. I'm using two pieces of javascript - one piece loads the nivo slider and the other the hide and show easy tabs:
http://www.kollermedia.at/archive/2007/07/04/easy-tabs-11-free-tab-menu/
Both were fine when I hacked them to hell trying to get them to look the way I wanted. Since i've put them together all hell has broken loose (bit of an exageration) but it may as well have because although they are both working, the page flickers badly on load. I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the script kicks in. I also notice that the increased page height, for the split second (sometimes longer) it takes the content to hide activates the scroll bars and i know this could have an affect. I'm also using background images within the links on mouse over commands.... i didn't know what else to do.
I've read you can add script to only show the content once the script has loaded but I know zero javascript : ) ... yet!
Can somebody please help me fix this? I've read lots of posts around the net but they all put the code with gaps where your supposed to fill in and where it's put is expected to be known. I'm sorry to be such a mong but could someone literally copy and paste my javascript and edit that to show me?
I know it's a lot too ask but i've been trying to fix this all day.
Here's a link showing the problem (when selecting the portfolio links the delay / flicker lasts ages!)
link to the site: http://www.adam-ashton.co.uk/homepage.html
(sorry to be so long winded)
Thanks,
David
Page Flicker can be handled with the help of some css
.hideME {
visibility:hidden;
}
Add this class to the Top Most Element (Mostly a div ) of you html page
And inside the script tag ,
write a window.load function
$(window).load(function() {
$(selector).removeClass('hideMe');
});
this should do the magic :)
Add this one line code at 46th line .. Means first line of window.load
$('.container').removeClass('hideMe');
I am using a Javascript accordion function which I found on the internet, however my Javascript skills are at a novice level ( Hence why I sourced a completed version to begin with).
What I have noticed is that when you load the page the accordion shows half initiated ( See Jsfiddle), what I would like to happen is that the accordion appears completely closed when the page is loaded.
I have put the accordion up on jsfiddle http://jsfiddle.net/richlewis14/uPvwL/, unfortunately the level of javascript used is beyond my capabilities and would appreciate any help in modifying it to my requirements, also if anyone could explain what is actually happening in the code I would appreciate that also, I would like to learn rather than jsut get the answer
Thanks
The script takes an argument to specify which element to open by default.
Change parentAccordion.init("acc","h3",0,0); to parentAccordion.init("acc","h3",0); and you're good to go :)
See http://jsfiddle.net/uPvwL/2/ for a working example.
Hi i'm a JavaScript novice and need some help. I am trying to create a toolbar which can be viewed on any website through the use of a bookmarklet, the toolbar is simply just a div with a few links. But i am stuck on how to achieve this. Any help to accomplish this would be greatly appreciated.
most bookmarklets that do something complecated like "creating a toolbar" simply add an external script to the page that the bookmarklet is invoked on.
Basically all you have to do is write a link that contains javascript, which can be acheived by starting the href="" with javascript:
so lets just start with a script in an href that will add an external JavaScript to your page
addScript = function ( url ) {
myScript = document.createElement('script');
myScript.src = "url";
document.head.appendChild(myScript);
};
addScript("http://google.com/");
so if you shrink that down into a url you get..
click to add toolbar
however you want to make this bookmark-able so theres one more level of confusion we have to add... and this part has to be done in different ways depending on the browser
addBookmark( url, title ) {
if (window.sidebar) { // Firefox
window.sidebar.addPanel(url,bookmarkName,"");
} else if(window.external) { // IE
window.external.AddFavorite(url,bookmarkName);
}
}
You can include that on the page where you're going to have your add bookmark button. A couple things to note though
this isnt going to work in opera.. but who cares about opera
webkit browsers (chrome & safari) dont allow javascript to create bookmarklets
Finally you need to mash it all up into one ugly link
click to add bookmark
In the end though I suggest you look into making a Google Chrome Extension or a Firefox Plugin instead of a bookmarklet since you have more capability with either of the two.
As far as how to make a toolbar with JavaScript, well you're just going to have to make another question for that.. Its too much and you haven said enough about what you wan to do for me to answer it here.
bombedmetor,
Greg Guida's tip on including an external script will allow you to create an awesome, clean bookmarklet-based toolbar. Why? Because you'll be able to use JavaScript libraries like JQuery, etc.
Here's a quick example along the lines you asked for to help get you started. The bookmarklet creates a div element with a link to the Stack Overflow homepage.
javascript:void(function(){var divElmt=document.createElement('div');link1=document.createElement('a'); link1.href='http://stackoverflow.com';link1.innerHTML='StackOverflow Homepage';divElmt.style.backgroundColor='yellow';divElmt.style.position='fixed';divElmt.style.top='0px';divElmt.style.width='10em';divElmt.style.height='5em'; divElmt.style.border='solid red 4px';divElmt.style.zIndex='100'; divElmt.appendChild(link1);document.body.appendChild(divElmt);})();
To use the above bookmarklet, you create a new bookmark in your favorite browser and add the code above where you would normally place the URL.
The code does the following:
Creates a new div element.
Creates a new anchor element and sets the value of the href attribute.
Assigns some basic values to the style attributes of the new div (so you can see it easily).
Appends the anchor as a child element of the new div.
Appends the new div element as a child of the body element.
If all goes well, you should see a yellow box with a link to the Stack Overflow homepage at the top-right of your page after using the bookmarklet. bombedmetor - I hope this helps get you started. After you get comfortable with how these things work, you can apply Greg's wisdom to create your toolbar bookmarklet in a way that can be added to people's browsers with just a click or two.
Something to keep in mind: As Greg indicates, bookmarklet code is treated as the contents of the href attribute of an anchor element. This is why I used single quotes in the code above.
Some sites/articles to check out:
http://en.wikipedia.org/wiki/Bookmarklets
http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/