I have a list of items for which I want to show a couple of items, then a "more" button. I would like the more button to show the new items in a popup box. There are many ways to make this work, but I'm trying to figure out what is the best practice.
Here is my approach. We use MooTools and Clientcide on our site:
Directly following the "more" button, I include a div that contains the content I want to put in the popup (the full list, including a duplication of those items that are visible by default), with a class that includes the style "display:none".
I attach an event to the more button that runs a script called "popupNext". popupNext takes the next element after the button (using getNext from mootools), and creates a new StickyWin (via Clientcide and stickywin.ui) with that element as its content. Then (and this is the part that feels especially hacky) it removes the class that includes the "display:none" style from the content element.
Finally, I use element.store() (from mooTools) to store the StickyWin (with the key "win") in the event element. I neglected to mention above: when popupNext runs, it first checks via element.retrieve() whether there is an existing StickyWin, and shows it, if there is.
This all seems OK, I guess--the biggest disadvantage is page bloat--while I'm showing only first couple of elements of each list, there may be more that are loaded with each page but never seen. But I'm curious whether there is some better, standard way of doing this. For example, I could reduce bloat by retrieving the elements via ajax, at the expense of slower response when a user wants to see the full list.
Check out StickyWin.Ajax - it seems to be closer to what you need than the plain StickyWin.
Related
I want to make two buttons, which will open (depending which is clicked) new page but with different style.
I added eventListener to button and I used window.open, then I want (if it's posible) to somehow call function after the new page is loaded to change style of some elements.
I want to have result similar to two identical htmls but with different function calls from script, but in more dynamic form(so without copypasting htmls)
The first idea that comes to my mind is to pass some GET parameters to indicate whether to apply one of your 2 styles
but if you maybe provide code examples or more details about your problems (code snippets/framework used if any )it may help more for addressing your exact problem and solving it quicker
How to retrieve GET parameters from JavaScript ,This may help if you choose to proceed with my solution
An alternative is to use localStorage and save some piece of data about the style and then on the other window load event you can retrieve and apply it's data where you think it is needed.
Is there a way to click on a div and save this click sequence value in the db.
Say I have ten items in 10 small small divs and I want them to be sorted in the sequence i click on them. So clicking on the first one will be sorted first and the next and then next.
Want to be able to do this with Javascript. Have seen this happening in desktop application where form fields are sequenced for tab order as you click on the fields.
The easiest way to do this is to bind to the click event of the divs, and pushing the div elements onto an array whenever they're clicked. Then you can use .prepend() to the container array by popping the elements from the array. Here's an example..
I can give you a conceptual format, because a full-fledged deal will be quite long, and also because you've posted no code.
Ensure that each div has a unique id, and has at least one common CSS class e.g. sortable - this is critical, as it will allow you to query the DOM for those elements for further sorting. And, regarding ideas for the id of the divs, I have seen variations of usually some identifier like post id from a database;
You have a listening function is run when the window is loaded, that listens for when any div that has the class sortable is clicked. You override the default action, and use the class in tandem with the div id to keep a record of which elements were clicked and sort them accordingly by whatever criteria you deem fit (id, date, content). However, then you have to manipulate the DOM to be modified to properly represent your new ordering. This can be done in two further ways:
Your sort can be real-time (which is laborious and involves higher RAM usage and a lot of DOM manipulation, but it is doable).
Or, option 2: perform a static sort where this information is passed via a form to another page, which redirects to the same page or a new page with the reordered DOM. Another way of doing that is to purge the DOM tree and rebuild it in the same page with Javascript using the sorted information upon the submission of a form, or the click of a button.
I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.
(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.
If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).
I made a large form, which has many elements. I use javascript(jquery) to make this form have a step-by-step effect. The problem is that, when the page is loading and before the javascript behavior is triggered, the form shows in a mess and all of its element are shown. Any ideas of improving this?
A common term for this behavior is "flash of unstyled content" (which will be useful when searching for solutions). Technically your content has been styled (assuming the page is structured and parsed correctly), but your JavaScript is applying additional style rules and it doesn't do that until the page is loaded.
One technique I regularly use is to set elements to display:none until I am ready to work with them. This isn't always practical, as sometimes the element must be visible and/or have a display box for a particular piece of code to work.
See this article for ideas.
Group all the form elements in a hidden div (style would be display:none) and have a "loading" message show.
When the document has finished loading, trigger some kind of "startup" function using
$(document).ready(function() {
//unhide the form here
})
So I am trying to create an extension in Chrome (a prototype for a project that I am doing) that targets all of the <div> tags of any web page, hides them or rather doesn't display them until the user clicks the mouse (further explained below). So typing a url into the browser yields a white page. The person clicks, and the first <div> appears (probably the mast head or menu). The user clicks again and the second <div> appears.
I have gotten to the point where I can hide or show all <div>'s (the obvious easy part) but I am not sure how to go about targeting each since every website has different id's for them while still using the <div> tag. This is what I need the most help with.
This is part of a grander operation called the Web Crank. It's just a physical crank that controls the speed by which a web page loads. Each time you make one full rotation of the crank, one section (the first <div>) of the web page loads. The faster you go, the quicker the page loads.
I hope this is clear enough. I am a newbie when it comes to this, but I have done some minor coding in the past and it's not such a big deal.
Thanks for your help!
Using just the DOM without any libraries, iterate over this:
document.getElementsByTagName("div")
gets you all the <div>s on the page. To iterate over them, use a for loop:
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
/* stuff */
}
In jQuery (which you probably ought not to use in a Chrome plugin...):
$("div").each(function(i) { /* whatever */ });
What you basically want to do is iterate through all the <div>s and hide them all, then as you crank the crank, have that call an iterator that goes through and adds things back in. Probably what I'd do is create a FIFO queue (like this?) of 'to-be-cranked' elements as you are hiding them, and then as the crank operation fires (however you do that), start pulling items off the queue and showing them again.
As a side issue, why <div>s though and not just all block-level elements? You probably want to search for <div>, <p>, <blockquote>, <ol>, <ul>, <dl> and <table> elements too.
If you can get every div on a page, just stick them in an array and now you can index them.
if you can use jQuery then use the .each keyword. that will allow you to itterate through the collection and gather data about them, show/hide etc.