Is it possible to animate a div, or any other HTML element on a page refresh using jQuery or a similar web technology?
I am thinking something like the Google Photos search box animation.
When clicking the input, the element remains, while the rest of the page fades out and the URL changes. Then the new elements fade in.
This has to be possible by telling the browser somehow that an element should remain on the page after a request and providing the information, that it is the same as the other element loaded with the request.
This is the combination of two things:
Typical animation (you can do that with jQuery by adding classes and leave animation to CSS or use jQuery Animations https://www.w3schools.com/jquery/jquery_animate.asp)
History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) you can manipulate with URL
Related
I've created a lightbox function which loads over the top when a user clicks on a post link in the archive. The overlay needs to display images and short paragraphs of text in a slideshow style (with next and prev buttons), those fields are created with as Advanced Custom Fields flexible repeater.
I'm using JS to .append() a div to the body and I need to then query the post, by ID I guess, within my js to fetch the first value from that ACF repeater, then second, then third and so on, when the next/prev buttons are hit. I'm thinking that I could perhaps quickly grab an array of those values when the lightbox is loaded and then cycle through them, but am not sure where to start.
What I don't want to do is simply .load() the post, headers and all, into the lightbox, just the images (and short peices of text) one at a time.
Any pointers greatly appreciated.
I've got around this issue by storing the information that I need in an array during the initial loop so that when the user clicks on the post I .append() an overlay to the body and then create a slide for .each() of the nodes in that array. The information displayed in each slide is pretty minimal in this case, just an image or a single line of text so this solution works more efficiently than querying the database on each click or lightbox load.
I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do
Have a single HTML Page for End User
Preload Dialogs which will be displayed in response to user action
Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide().
I then open and close them. All this works currently. However I have the following problems:
The divs sometimes momentarily appear on page load
It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).
Thanks-in-advance,
Guido
You could start the dialog box divs off with a style attribute set to:
style="display:none;"
Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you
The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.
I'd like to help the site visitor navigate a page on my site. For this I'd like to have a javascript auto navigation that will place the pointer on different page elements. Is there a way in javascript to place the pointer on the desired page elements: div, button, span...?
Similar question asked here : Move Mouse Cursor Javascript
Basically your options are using the method in the linked post, or using libraries like http://amberjack2.org/ to visually guide your users around the page / site.
you can not move the pointer using javascript. you can only set the focus to an element of your choice.
I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
Like this:
Info
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
$("#buttAbout").click(function () {
$('#about').show();
return false;
});
It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.