I've got a question. I've been working on this site for a while, and I've hit a bit of a brick wall. I've thought this over a few times and I'm not sure how to go about this.
I've got 5 different configurations for content on a page, and I need to swap between them. What's supposed to happen, is when the user clicks on a button, a series of animations is supposed to happen, and ultimately replace the button and the top with the one that was pressed. The one that was at the top should return to its original position ("Home" should always be on top, "About" should always be just beneath that, save for when it's the current page).
My site is here, http://www.logicanddesign.ca, and all the javascript is open for you to see. Any help you guys could provide would really help. I'd like to do this without completely rewriting my site, but if it's the only way, I will.
Well, the first thing I'd like to point out is that you're associating the button_click function with the images instead of the divs containing them. You would be better off using the div tags for event handling.
Secondly, you only move the current button and the pressed button. To achieve the affect you're going for, you need to move the buttons in-between the default positions of buttonPressed and currentPage.
Moreover, you can't just statically define moveUp function for the button pressed and nothing else. Because sometimes you'll need to move the buttons between the button pressed and current button upwards.
As is apparant, you need to account for in-between moves when you set divs to animate. Possibly in the moveDivs function.
I made a fiddle representing what changes you could do to achive required effect, but I feel what I have written is a mess. The sort of mess which is worthy of nightmares, really...
In my opinion, you could create a javascript class to handle animations and movements. Making a class will make code much cleaner and you could indefinitely add buttons without breaking your code.
Related
I am trying to have images appear on click of a button. I have that process working, but I'd like for the users/players to not see the buttons I will be clicking.
Is there a way to set a space where the button 'still lives' but isn't visible?
I'm pretty sure I'm going to need to get cute and hide the buttons on screen. However, if i can set them to specific spots and have them invisible, but clickable, that would be ideal.
Thanks in advance for the help.
I'm using HTML, CSS and Java. There's no JQuery in the code (for context)
The question itself is not clear but from what I understand you can do something like that in a various ways:
-- If the case is making them visible before click, you can set their z-index to "-1" and when you need to click them, change it to "1"
-- If the case is buttons are going to stay on the page and clickable but no one can visually see them, you can set their opacity to 0. Even they are invisible you can still click them via this method.
--> To position them on a specific area on your page you can use your CSS as the way you want. No need to worry about opacity change.
I am using this popular carousel (http://kenwheeler.github.io/slick/).
I have placed certain elements inside each slide. At least one of these elements must be selected by the user before moving to the next slide. But I cannot figure out how to prevent the user from manually moving to next slide by clicking the 'next' arrow before selecting an element.
I know that 'next/previous' arrows can be disabled but I do not want to do that as the user might want to go back to previous slide to change his option.
I know that one option is to disable default arrows and introduce my own prev/next arrows and then bind slide changing functionality to it along with condition checking. But it would be great if there is some built-in option in this slider (which I am not able to figure out) as it would minimize my effort.
I made a quick modified version of Slick that allows for condition checking when going next, see: http://jsfiddle.net/alan0xd7/dhxhv5gg/
Basically the slider will only go to next if fnCanGoNext returns true.
I've only actually added one line around line #700 on the fiddle. It doesn't handle things like clicking on "previous" when on first slide, but you can probably work from here.
Since Slick is an open source project, don't be afraid to change the code and adapt it to suit your needs. It is fun to see how things work behind the scenes.
Hope this helps!
I'm seeking to emulate the on-clickable input forms that pops up when an user clicks on the blue bar as shown above. My experience with front-end development is limited so I don't know what to call these elements exactly, but let's say they are on-clickable input forms contained in a box, which can lead to other on-clickable forms like the date picker as shown.
How do I do this in Javascript? Preferably with AngularJS, since the app I'm working on uses that. I don't mind using JQuery though.
I'm not looking for detailed step-by-step instructions (which I don't mind), but hints to get me started on cloning these features.
Thanks.
The pop-ups you see are going to be HTML elements, probably <div>s. The page will use JavaScript to create event listeners on the bars to hide/show them when the bars are clicked/moused over. The "pop-ups" are really just like any other element in the page, but with a higher Z-index and using CSS positioning (most likely absolute) to make it appear as a pop-up. It also looks like they're using the CSS arrow trick to draw the speech bubble pointer, though it could also be accomplished with images.
If I were to develop this, I'd break it down into stages like this:
Get my pop-up into my HTML page, and make sure it's not appearing anywhere.
Make it show/hide when I wanted it to (either when the blue bar is clicked, or when the user mouses in/mouses out of the blue bar).
Make it show/hide where I want it to (near the blue bar)
Make it look better (work on the CSS and get the pointer to work properly)
Convert that work into a second-level popout. The second level is going to be the exact same technique, but maybe the CSS classes are going to be different so the second bubbles look different and have the pointer at a different position.
Of course, you don't have to develop this functionality yourself. There are also a number of jQuery plugins you could use, as well as Bootstrap's popover component.
I have a transparent floating iFrame with a lot of empty area. It floats on top of my site (position:fixed).
The problem is that if anyone click on the empty area, it does not click below on the real page.
Is there a way to perform this? Like a click through in someway.
Well, no. The only thing you could do is to simulate it by capturing the click event, get the coordinates, and then try to find the correct element beneath, and execute the onclick event handler. However, it's a bit impractical, and I think that you should expect some bugs..
Are you sure there isn't another way to solve your problem without that transparent iframe?
Traversing DOM would be necessary, as stated by Onkelborg.
You'd get the mouse position and test every dom element to see whether or not it was clicked. You'd then have to invoke whatever event handler you've defined... You'd have to manually manage event bubbling as well [which is different between IE and other browsers, as far as i know]...
I should also note that it isn't possible to take a picture of your website with JavaScript, so you couldn't click through transparent text either way, nor could you click through images that have transparency.
I think the best option here would be for you to show us an example of what you're trying to do. Usually, a little restructuring of the website can go around this problem.
Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.
$("#blog-img").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog").hover(
function(){
$("#default").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog-img").show("slow");
},
function(){
$("#blog-img").hide();
$("#default").show("slow");
}
);
I would love any help I could get on this.
You are possibly creating a race condition by using timing to show the images.
When both images are shown it's probably because the at least one of the Shows has been executed before the first executed one completes. This can happen when you move fractionally -we're talking pixels - into/out of the object with the hover.
I recommend using CSS to resolve this. It's much cleaner than using Javascript.