Marquee on mouseover and overflow - javascript

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?

Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow

Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

Related

Smooth Scrolling and Anchor Tags Issue

I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top

Wordpress template div not expanding

I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

Problem moving whole html-page down! margin-top to html element doesn't work on all pages

i have a strange css, JS problem. My chrome-extension should move the hole website some pixels down, so i can display a toolbar on top of it.
This works for most pages, but doesn't work for a few. And i can't find out what's the problem. The code for moving the page down is really simple. Just this line, which adds a margin-top to the html-element:
document.getElementsByTagName('html')[0].style.marginTop = '36px !important';
It's easiest explained and seen if you install the addon and browse to www(dot)interspar(dot)at (here it works) and to www(dot)weinwelt(dot)at (here it doesn't work). The addon is found here https://chrome.google.com/webstore/detail/pilobbegphefikcgjpajnneiiahhejam
Please don't consider this as spam, as this addon is only useful for german speaking people and i think there aren't many around here ;)
It doesn't work on that site because its whole content is positioned absolutely (look at <div class="parent">). You need to loop through the whole DOM looking for absolutely positioned elements that have top property and increase its value accordingly as well.
That's only a tip of the iceberg though, as some sites would be adding absolutely positioned elements to the page dynamically, so you would need to listen to dom changes (DOMSubtreeModified event) as well and do all repositioning again.
Try it on the BODY instead;
document.getElementsByTagName('body')[0].style.marginTop = '36px !important';
HTML tag can't have a margin on it.
According to following link "!important" is only supported by safari.
http://hungred.com/how-to/jquery-javascript-css-important/

set the height of a container to hold dynamically-sized widget

Here's an example: http://la.truxmap.com/marker?id=thesweetstruck&t=1267058348000
The widget on the right usually overflows unless i set the height of the container to some fixed size like 1800px. What I want to do is have the div with the white background (container) always span AT LEAST until the bottom of the widget. I don't want to use overflow because I dont want anything hidden and i certainly dont want scroll bars.
Is there a css solution to this? I feel like ive tried most everything except writing a javascript solution, which i would like to avoid because im still very much an amateur with javascript. Thanks so much!
Edit:
I don't have any requirements as to how this can be done, id just like a solution. ive been trying to figure out this problem for over a week and its now driving me crazy.
Looks like you just need to clear your floats. After this div
<div id="truckLogo">...bunch of stuff...</div>
Add
<div style="clear:both;"></div>

Categories