JQuery :: Inelegant Code For Remembering Position Of Panel?
Jul 30, 2009
I know someone will enjoy rewritting this chunk of code for me and the community! It's a simply cookie to remember the position of an animated panel so it stays open (or closed) after a page reload. It is working*, but I am sure it can be shorte*Actually it's not perfect, when you close the panel you lose the button altogether until another page refresh! Long code that doesn't work!
I have found the code to move my objects around but I can't find a way of remembering the positions the objects were left at when I refresh the screen.
I would like my users to be able to move the layout around and have it save their layout so that the next time they view the website its as they left it.
So I have this vertical menu with a few options. Originally it was pure CSS with a basic a:hover to change the background of the menu item. But then it was decided that whichever menu item you last had your mouse on should remain in that hover state.
So I went ahead an busted out some Javascript. Now I'm not exactly talented with Javascript as it's not one of my main languages. This is what I came up with.
I've got this javascript routine (i found on google) in an asp.net page that on page reload sets the cursor of a textbox to the last line. It works great!
Using a similar concept, I have another application that uses a textbox like an editor window and has a save and other buttons. Problem is - when I save/post/reload, the textbox returns to cursor the top again.
How can I preserve / save the exact cursor spot and return to the exact same spot I was in before I saved. Code:
I wonder if it's possible to implement a menu like the one ofcbs.com?Basically, when mouse over some of the menu items, a menu panel shows up with a few columns of links. The many panel disappears when the mouse moves out. I think it's quite neat and I'm hoping to be able to do something like that with jQuery.
I'm loving this: Sliding Login Panel with jQuery 1.3.2 However, I'd like it to work so the 'Close Panel' link actually appears in the #panel itself and doesn't swap/toggle with the 'Login | Register' part.
First post here - I am trying to hide options in a form select field if they are empty. The code below works...but even I know it must be a horrid way of doing it! Anyone care to tidy it up for me? I would learn much from the experience,
I am building a web page that has tab panels that hide and show information depending on which one is selected. I am trying to make the tabs at the top of the page and go horizontal.I have had some success, however I am having two problems. The first problem is that one of the tabs doesn't work. (specifically tab 4 "videos").The other is that when you first start up the page, there are three tabs highlighted (1, 4 and 5), however there should only be 1 tab highlighted (tab1).I have included my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>[code].....
I am implementing the following example into a project I'm working on...Simple Slide PanelWhen clicking Slide Panel, the panel pushes everything down. How do you modify it so that instead of pushing everything down, it just slides down over the top of everything else?
I need to get the selection position by js and make sure that this code work for all the browsers.
For example, the user selected this text (red text is selected): Hello world The function should return to me array or two values wich they are: 3,9 (start and end position of the selection)
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
The first thing I'd like to do is show/hide divs. What I'm going to do is pull out a few bits of PHP code out of the database and assign them all a class of show or hide. So, I need a script that can either open or close a div using a link using classes, probably with AJAX or DOM? The main thing is that it needs to be compatible with all major browsers. I've scoured the internet but can't find the most simple of scripts, and unfortunately my AJAX/DOM is terrible!
The second thing I need to do is remember which divs are open or closed. I was thinking of doing this with a database, and so I'll need to run a tiny PHP script to update the DB whenever a div is opened or closed. I assume this would be done using an onclick event? If so, I probably need to use GET to update the new class in the DB. Any ideas how I'd work out whether the div was open or not, and what function I'd use to run the PHP script?
Also, every time a page is loaded I'll get the 'show' or 'hide' options from the DB and assign them to the classes so the user still has their preferred tabs open.
I now have the following script to generate a randomised listening test for students (I've removed some of the more elaborate features for the purpose of this thread).
Code:
<html> <head> </style>
[code]....
One thing that I have just now noticed (dunno how I missed it before) is that clicking on the link generates a new random link each time it is clicked. What I would really like is for people to be able to hear the same sound as many times as they want until e.g. they hit the browser refresh button.
Do many programmers remember most of the object properties and methods or do they use IDE or references to find those specific objects. I'm starting to learn Javascript and seeing all the different type of objects available can be depressing. :(
The problem is: variable "mywin" is lost after i REFRESH the current page. Since i'm doing a LONG, LONG inventory management (where the opened window is about 200K long), I want to know how I can access the opened window. I tried searching the web, but as far as I know there isn't any "list of windows previously opened by this one" method or property.
I've managed to do it with a setTimeout function on the child window that calls another function of the parent window every 1/2 a second. Code:
The script below allows me to create expandable/collapsible menus. What I'm trying to figure out, and have been brutally unsuccessful thus far, is how to expand the menus upon an initial visit.
For example, on the home page, I have a link to "Colors" and a link to "Groceries". When a user clicks on "Colors, they are taken to a page with the collapsible menus: Colors GroceriesIf they were to click on Colors, the menu would expand and the user would see: Colors - Red - Blue - Yellow
GroceriesI want to make it so that if the user clicks on "Colors" from the home page, the "Colors" menu is automatically expanded on the page with the collapsible menus.
Haven't used cookies before really but I'd like to create a cookie that remembers the options a user has selected so they can have their styling next time they visit. The user selects the styles through 2 drop down boxes. Below are the drop down boxes for the information I would like the cookie to remember.
HTML Code: <script type="text/javascript"> function fontsize() { selectedstyle = document.form1.font.selectedIndex; newsize = document.form1.font.options[selectedstyle].value;
I have a form that has a reset button, and when it's closed, the form is reset. However, at least in testing on my own machine, I notice that the form fields are remembering past input (on Firefox 4 anyway). Once this goes public, I don't want the form remembering anything in case the website is viewed on a public machine. How can I keep the form fields from remembering any past input?
#navigation li is the parent element, which is positioned relative.The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).
I look for something in jquery ( a sliding panel div that can also be collapsed and shows the correct image, hard to explain please see below link, its used on this [code]Anything such exist for jquery with the same features?
I want to be able to animate the panel sliding it in from left to right.
This is what I have: $("#tabs").tabs({ selected: null, fx: { width: 'toggle', opacity: 'hide', duration: 'slow', height: '600px'} }).addClass('ui-tabs-vertical ui-helper-clearfix');
It doesn't do what I want it to. It takes the width and slides from right to left and it isn't exactly what I consider sliding.
I am trying to create a panel that can be resized, its all working however if I resize the panel then try to resize the browser the panel doesn't resize to the browser width: [url]
I have a tab panel which loads external content dependent on the chosen tab.
Due to space issues i would like the content to be expandable via show/hide functionality, however I can't seem to figure out a way to target the #expandpanel id within the tab panel when the tab panel content is loaded as an external page.
but I dont know how to give Panel code the name "contactPanel".. so this is where I'm stuck. how do i do this? also I have a "Open Contact Form" at the top of the page but I want to put a contact link at the very bottom and after the link is clicked i would like for the website to scroll up before the panel drops down.. is that possible?
