I'm trying to get my contact form to pop up when I click on "CONTACT" at the top of my site. My site URL is http://www.integritydesigns.com.
Right now the contact link at the top of my site links to an id (#contact) which is at the bottom of the page. The contact form currently only appears when you hover over the CONTACT US div (.dropdown) at the bottom right of the page. I'd like the form to appear when someone clicks on "CONTACT" in the top nav bar as well.
I'm sure it can be done with Javascript but I'm not sure where to start. Any help will be appreciated. Thanks!
It's not much that you want to initiate a "hover" from a separate location, it's that you want to "show a div" using two different triggers.
Look at the code you use to show the "contact" <div> when you hover. You can use the same kind of recipe with the link, but instead of an "onhover" trigger, use "onclick". You can set the "href" attribute of the link to "#".
In the CONTACT click handler make the popup visible. Probably, by assigning some css class to it.
In your top menu link I'd put something like this onclick="document.getElementById("form").style.display='block'" (where form is an id given to your ul containing the form)
Of course if you want it to disappear if the user scrolls or clicks outside of it you'd have to set that up. (Hopefully others will offer suggestions for that as I myself have been wondering whats the best method to do that)
Related
Need help with the "our team" section halfway down this page: http://dev.doubleaevents.com/
When you click an image it opens to reveal more information. I'd like to be able to click another image and have the previously opened image collapse, so that a user can't open more than one image at a time.
Would also like to know if making them slide out to the right (instead of down) would be a simple fix?
I'm a js novice so any explanations are appreciated. Here's the js file for quick reference: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js
Try adding this:
jQuery('.portelement').each(function(){
if(jQuery(this).hasClass('large')){
jQuery(this).removeClass('large');
jQuery(this).animate({
height:240
},300);
}
});
before:
jQuery(this).parents('.portelement').addClass('large');
In your javascript code.
When you click an item you basically want to search for elements that are already open. Then from there remove the 'large' class name and close that element. From there you continue on to opening the selected element. Thats what this code does.
As far as your other question, it shouldn't be too difficult, just mess around with the animate method and css. But maybe look into the isotope documentation. There may be an option for that.
I'm not that into Javascript but I think this could be achieved easily.
I've got a link on my page that sets a parameter (with PHP). That parameter is used to get how much posts to show. This works like a charm.
But now I want to scroll to the postition where the user clicked the link after the page reloads with the parameters. So the users doesn't have to scroll through the posts he already saw.
So here are the steps:
User clicks link to load more posts
Site gets reloaded with parameter (e.g. domain.com/?numberofposts=10)
Now the Site should scroll to the position the users was when he clicked the link
I was trying to achieve that with scrollTo etc but I cant get it working. My thaughts were to pass the scrollposition as an other parameter maybe?
Do someone know how to solve this? Thank you :)
By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page.
The anchor tag will consist of two HTML elements. First, you'll want to create the link.
If you are linking to a spot on the same page, the format of the link will be similar to:
Link Text
For example, if the text is "Read more about raptors!" then your HTML should look like this:
Read more about raptors!
The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the page, similar to:
Link Text
The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump similar to:
<a name="anchor"></a>
Following our previous example, the anchor code will be:
<a name="raptors"></a>
Full tutorial here
You need to know where you have to scroll to.
So yes, you do need to store the scrollposition somewhere (or pass it as a parameter).
This is my example site.
https://www.practo.com/bangalore/dermatologist-cosmetologist/anekal
In this when the "Book Appointment" button is clicked. A dropdown block appears and the page scrolls itself to top to make the block completely visible to the user.
I want to do the same in a website, so I need to know how its done. Can someone please help me with this.
Thanks in Advance...............
Add an anchor to the corresponding block, call the anchor when clicking the button. You could use a javascript scrollTo plugin for the animated effect. (as already mentioned.)
There is a plugin for jQuery that covers that kind of functionality: http://demos.flesler.com/jquery/scrollTo/
I'm trying to figure out a way of clicking an Anchor link TEMPLATES
on the top of my page without having the browser scroll to the point of my anchor.
Sounds redundant huh?
Wait.
My anchor link is inside of a overflow: Hidden text box where clicking the Anchor link
at the top of my page should only raise the anchor in the Overflow text box displaying it's
content, like having a new webpage. From a layout perspective the browser must always be at the top of the page where my form is.
Anyone have a clue?
Thanks
UPDATE:::
Oh spoke to soon, looks like the Css and Javascript - Show and Hide method would be more adequate.
Found here: http://webdesign.about.com/od/dhtml/a/aa101507.htm
Thank internet!
It is very easy do so. What you are trying to do is to have a parent div/view which would act as the main div and all the other divs/views will be loaded or unloaded within it dynamically or so as its children. It would better to employ a design pattern such as "MVC", but it can be done via JQuery straight up. If I was to tackle something like this, I would have a "navigation view" and then content views so when a user clicks on the desired navigation link, that particular view will be loaded or scrolled in. (Of course, you need to experiment and line your depths as desired for the content views).
This is how Flash is programmed. This is a very high level explanation, and I hope it gives you somewhat of an idea about getting it going.
I'm using JQuery version 1.4.2.
My goal is to let the user click the voice 'login' in the top menu to scroll Down the login form (as twitter).
Everything works fine, the insertAfter jQuery show the form as I want, but when the login button is clicked, it change its horizontally position by some pixels.
How is possible to let the 'login' button fixed after insertAfter (excuse me for the pun) ?
Make insertAfter insert after the login button's container and make sure you set a width on the login button's container. OR you could set the position of the login button to absolute and then it won't move at all
You're going to need to either edit your markup or css. I can't tell you more without seeing both.
-Bill
There could be a few reasons for this. One that possibly comes to mind is that the position is being set before scroll bars appear on the screen and changes it's position. One of my much loved tools is jQuery position, it allows you to absolutely attach the element on the page - perhaps try giving that a go? Otherwise, perhaps hide the element after all the content has loaded using document.load instead of .ready? And lastly, perhaps show some code? :-)