Problem with multiple CSS pie + overlay - javascript

This is an IE7/IE8 issue --
I'm trying to load an overlay beneath a CSS pie object. The object is partially covered by the overlay until you scroll a bit.
Here is a link, http://lab.atworkinthecloud.com/csspie-index/index.php (click on the "+View History" link to trigger the dropdown with overlay)
The funny think is it works fine with only one or two objects on the page --
But with multiple objects on the page things get crazy.
http://lab.atworkinthecloud.com/csspie-index/index1.php
Any help or suggestions would be very much appreciated.

Try using the jQuery .delegate() function in place of .live(). jQuery delegate documentation shows you just how similar they are, just delegate is more efficient.
EDIT: also, try upgrading to a newer version of jQuery.

Related

Sticky scroll for two images

I've been trying to figure out how to create a sticky scroll effect on two images, basically like this: http://www.nationalgeographic.com/americannile/
(scroll down to see you will see the four images with sticky scroll effect)
I have tried some jQuery plug-ins but still couldn't figure out how to create the effect I wanted.
Any help would be greatly appreciated, or just a point in the right direction.
Many thanks
What You want to do is apply some actions when document scroll position changes. Since You are using jQuery, there is plugin exactly for this functionality called ScrollMagic, and here are the demos.
The link you posted uses the scrollr library:
https://github.com/Prinzhorn/skrollr
I've also used this library and I just can recommend it to you. It is really easy to use, for basic animations you don't need any javascript, everything is done via data- attributes.
It even supports mobile devices to some extend.

Jquery drop down menu strange behavior

My Problem (Fiddle)
My problem is that on my jquery animated dropdown menu, when you hover over the "Other" link, the sub menu does not appear. When using firefox to 'Inspect Element', I find height is animated, and the width appears to be alright, yet all I see is the left border.
I noticed that if I have that particular section display as a block, when you animate the first menu it is shown, but upon entering the unordered list, it disappears (ex). I imagine it is somehow related to this, but I can not figure out what is causing this.
Any incite into what I'm probably just overlooking would be great, and of course much appreciated.
Notes:
I have had this problem in Firefox, Chrome, Opera, and IE.
It's designed such that it could work with only css. The the first .each is overriding default css hover behavior.
the empty span holds the arrow image.
only relevant code is posted. However, you may view my site here
If you have any tips on making something more efficient, always welcome.
http://jsfiddle.net/sailorob/4cdTV/5/
I've removed your CSS for simplicity's sake and simplified your functions by utilizing jQuery slideUp and slideDown, which essentially handle many of the css properties you were managing with your functions. From here, I think it would be fairly simple to work back in some of your CSS.
When utilizing javascript/jQuery/animation on menus, I highly suggest using timers (setTimeout) for firing mouseenters and 'leaves. This way, your menu is more forgiving when a user accidentally moves their mouse a few pixels out of the menu and it closes.
Well, in debugging the JS and CSS I found that if you remove ALL the JS you have, the drop down menu with sub menus work fine. The Other li opens up the ul below it just fine. Note, it doesn't animate without the JS though.
Here's a forked fiddle.
I tested it in latest Chrome and Firefox.

Javascript slider not functioning?

I am working on a website and stuck on an annoying problem. Firstly, please visit this page:
http://milabalami.com/saved/2/index.php Hover your mouse over the Menu on the right. You will see that the font changes colour and there is an image covering it.
Now I have implemented this Menu to a WordPress theme: http://milabalami.com/ As you can see when you hover your mouse over the menu, slider doesn't work. Why?
Issue is now resolved here: Javascript issue with easyslider
On http://miladalami.com/, you are including jQuery 3 times:
Each time you load jQuery, you're wiping out all modifications made to the jQuery.fn prototype, and thus rendering all plugins loaded before the final one is loaded useless. Remove all but the first jQuery, and update it to use version 1.4.4 instead of 1.4.2, and you should be fine.
Of course, the thinkbox plugin you're using may not function after the upgrade (1.2.4 to 1.4.4 is a rather large upgrade) but you should be able to find alternatives easily.

An automatically scrolling live ticker (like the "Top Tweets" of Twitter)

Is there a good Javascript library for generating an automatically scrolling list like the "Top Tweets" on the Twitter homepage? Preferable as jQuery plugin. It should also support AJAX functionality (to add new list items dynamically).
As we were not really satisfied with the existing solutions we implemented one from scratch. Our solution is a fully jQuery UI compatible ticker plugin (also compatible with their theming framework) and fully unit tested. We didn't yet have the time to test it under every browser, so feedback is welcome (for problems please open issues on the below Github project site).
A special styled demo (Twitter like) is available here.
The main main repository can be found here (ticker branch). There are several options to customize the ticker (documentation at the above mentioned Github repository).
Screenshot:
Here is a nice solution: Scrolling List
Try http://www.htmldrive.net/items/demo/38/Multi-purpose-slideshowtext-scrollerimages-scroller-jquery-plugin
That is the best solution I was able to find:
Scrolling List
If you want to write your own, make a div of fixed width/height, with overflow: hidden, then create another div inside it, with the position: relative property, filled with content from your feed (twitter posts, or similar, etc). Then, when the page loads just make the inner div's top: CSS value change (if you want the list to scroll up, the top value should decrement from zero).
I doubt this helps, but it is quite a good, simple way to get a scrolling without using a jQuery plugin.

Custom Selectbox (jquery script) - Non FF div scroll problem

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.

Categories

Resources