Looking for some help a simple onclick effect, sadly my memory is the same as a Gold fish so i cannot remember what to search to get some help on this.
Here's an example http://www.iconfinder.com/search/?q=
If you click the Logo it kinda moves down like a Push.
Just something like that
Would really appreciate some help thanks.
In most cases you should do this in CSS with the :active selector. (https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
If you really do want to use javascript you will have to bind on mousedown (to set the margin/position/class) and on mouseup (to set it back to original) and probably on mouseleave for good measure.
Related
Short version: This works
$(document).on("click",".Container",function(){})
This does not:
$(document).on("scroll",".Container",function(){})
Long version:
I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
I need to trigger a function when the content is scrolled, both up and down and on the fly not just past a certain point.
I can still scroll, it just doesn't trigger as an event.
I've tried everything I've found to no avail, from my short experience and what I've been reading I think it might have to do with how scroll doesn't bubble up the same as click, but I have no idea what I should do or try with that information.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
Thanks in advance for all the help.
Beyond this point I'll edit with suggestions that didn't work--
I think it's because the scroll event doesn't bubble and you are adding the listener as delegated, you should add it directly:
$('.Container').on('scroll',function(){});
More info about this in:
https://api.jquery.com/on/
With help from #A. Wolf and #M.Doye I found something that works. While it doesn't help understand what was wrong at least its working.
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
insert magic spell here
}
},true);
I have an idea for an website which needs this kind of technique. It's compared to the fade-in technique but in my opinion this fits the design better. Is there anyway to disable scroll options and only scroll to an anchor when its button is clicked. If anyone got a link to a tutorial it would be really helpfull as I can't get it clear myself.
To disable scroll options, you can use the css overflow rule like this:
overflow-y:hidden;
To add function to your buttons, you'll have to use js event listeners that are set to listen for clicks:
document.getElementById("t1").addEventListener("click", scrollDown);
After that, you can use javascript or jquery to scroll the page to whatever anchor depending on page position/clicks that have already happened etc.
Here's a thrown together jsFiddle of what it sounds like you're trying to do:
JsFiddle
I use a lot of divs in that example, but the only important thing for function is the id of elements used.
Hope this helps!
http://jsbin.com/ovODORove/1/edit
I'm sure you've all seen those design applications where you drag a node and it resizes the element. Well last night, and today I decided to give it a try.
So today I wanted to try dynamically resizing a div, and I'm a bit confused.
I tried various ways, but none seem to work.
Logically I know that by using JQuery UI I can set my class .EE (for east east) to draggable to make it drag the element horizontally, but while the element is being dragged I want it to also set the width to where it's position is. I assume by binding the draggable event to the elements css width would work, but when I tried that it didn't work.
If anyone can help assist me with this it'd be greatly appreciated.
EDIT:
Using JQuery UI's resizable handlers make this a real easy solution as you can see here.
ThreeDubMedia also has a nice plugin that enables this functionality as well. As seen here.
I played with it a bit, and I've got it working. This may be not exactly right for you, but I think it's a pretty good starting point.
I've assigned the same stop callback for every handle, and that controls the resizing in any direction. Also you should give a parameter to width() and height(), like Man of Snow said.
Here is the fiddle.
I need a little help...
After read and search for a while I discover a good jQuery plugin to deal with the selectbox custom style problems. I made some small modifications to make it work as I want. The plugin hide the custom select and append some div and ul tags.
In Firefox 3.6.10 it works really nice, but in Chrome (6.0.472.63), Opera (10.62) when I tried to scroll down the selectbox list (in this case the div with an overflow) it disappears.
It looks like a bug, could you check it please? Try to look around line 182:
.blur(function() {...}
I tried to make an example so I cleaned a lot of my custom CSS and make it all clear for anyone who wants to analyse it.
view example HERE and please try it on FF and Chrome/Opera
PS: I didn't pay much attention to IE... It will be another fight, but i'll keep it for later!
Any help would be appreciated! Thanks for your time!!
Cheers from Portugal
Yeah, it does look like a bug. I'm not sure exactly what the appear and disappear mechanics are for this control, but it looks like when I try to scroll the drop-down area, the .blur() style event is firing for the parent control, but no .focus() style event is firing for the child control.
You might try delaying the drop-down disappearance by a second for .blur() style events, then only hide the drop-down if the .scrollTop() of the drop-down hasn't changed (this gives the user a delay between when they grab that scroll bar in order to actually scroll it, and it won't hide if they do so). That's a massive work-around, but without studying the code a lot more closely it's hard to know if there's a better approach.
I am developing an image cropper and would like to ask you the following question: In order to prevent the default drag n' drop action when you press the left button on an image and keeping it pressed try to move the mouse, wouldn't it be cross-browser if to just use the picture as a background to a div box?
Just like so:
<div id="theDiv" style="background:url(pic.png) no-repeat;"></div>
How do you think? Is it acceptable? Not too ugly? Or should be done with JS?
I would do the same, there is no real other way (as far as I know of) of doing what you want to do crossbrowser.
Are you using a framework? Isn't there a reliable "dragstart" implementation in each of them that can simply be made return false? Correct me if I'm wrong.
You can set your own mouse events which will be more logical way. You will not even need to write code on per-browser basis AFAIK.
This event handlers can be used to set crop frame also.
But your approach is simpler, if you haven't plans on extend this much .
wouldn't it be cross-browser if to just use the picture as a background to a div box?
Yes, but you'd still be starting a drag; if you moved the pointer over into part of the page with text in, you'd be selecting the text, which you probably wouldn't want.
I'd stick with the x.ondragstart=x.onmousedown= function() { return false; };.
I might use draggable="false" or ondrag="return false" but your method works just as well.
You may take a look at this for example, which is a simple and fast image cropper written with pure JavaScript. It uses mousedown to detect drag start and mouseup for drag end. During dragging, it listens document.onmousemove event.