I need to achieve an effect where when a user triggers a hover on an a tag, current content on the screen slides out, and the new content slides in (depending on what was hovered on). Here is my HTML:
<div class="services-image" style="background:url('/sites/default/files/services-background.jpg') top left no-repeat">
<ul>
<li>Secure Mobile Computing</li>
<li>IT<br />Consulting</li>
<li>Software<br />Engineering</li>
<li>Microsoft<br />Services</li>
<li>Cyber<br />Security</li>
<li>Infrastructure & System<br />Adminstration</li>
</ul>
</div>
</div>
So, when a user triggers a#box-2 hover, the divs below ease in/out with new content. Example container markup:
<div class="content-slides">
<div class="slide-1">text</div>
<div class="slide-2">text</div>
<div class="slide-3">text</div>
<div class="slide-4">text</div>
<div class="slide-5">text</div>
<div class="slide-6">text</div>
</div>
I remember seeing this tutorial - it's aimed at designers, so you should fly through it :)
http://jqueryfordesigners.com/coda-slider-effect/
It should be easy enough to change the click events to mouseover.
Related
Hej folk,
actually I develope a small browsergame for my personal use.
The user should do scroll with his mouse over the map (like Google Maps) which I realized with utterscroll.js.
On the second the user should can build structures, delete and upgrade them on a fixed DIV-Grid. The number of the grid is the same like the position id of the place the user can build something.
Also for the build menu I need to href the grid DIVs but when I do this utterscroll can't scroll anymore and I don't know why it does it. :/
HTML
<div class="viewport">
<div id="grid">Grid 1</div>
<div id="grid">Grid 2</div>
<div id="grid">Grid 3</div>
<div id="grid">Grid 4</div>
...
</div>
"InGame"
All grids are linked DIVs (see above)
When I try to scroll with the mouse I "drag and drop" the link instead of scrolling trough the screen/map
screenshot
I only use the default utterscroll.js.
I hope you guy's can help!
rumpetroll
I'm facing a problem regarding gracefully resizing a set of buttons on a web page.
My problem in detail:
I have a set of buttons which are part of a unordered list.
Eg:
<div id="button-set-1" height="some fixed no" width="inherited from parent">
<ul>
<li id="list_item_0">
<button id="button_0">
<div class="inner_left_div">
</div>
<div class="inner_right_div">
</div>
</button>
</li>
<li id="list_item_1">
<button id="button_1">
<div class="inner_left_div">
</div>
<div class="inner_right_div">
</div>
</button>
</li>
<li id="list_item_2">
<button id="button_2">
<div class="inner_left_div">
</div>
<div class="inner_right_div">
</div>
</button>
</li>
</ul>
</div>
Now the problem is that the right div in each of the buttons has dynamic content, fetched from AJAX and updated on some user action. The content fetched from AJAX is variable in length across the butttons. I want to maintain that ultimately all buttons have the same height and width after the content is loaded. I tried determining the max-height and width and then using jQuery to set that. But its very cumbersome and jittery because for some cases number of buttons is very high and multiple AJAX calls are required to fetch content for all buttons. Then I have to resize after every batch.
Can someone suggest a neat way to do it, which would not be too obvious for the user and not degrade the user-experience for the web-page. Should I use animations to resize it?
You can specify the height for the content inside button through css.
CSS
[id^="list_item"] button div{
width: 400px; height: 300px;
}
This selector will select all the div elements which is under buttons inside list items.
I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.
When the user scrolldown with the mousewheel, I'd like the page go down untill exactly the begining of the next element. Like :
<section class="One">
...
</section>
<section class="Two">
...
</section>
<section class="Three">
...
</section>
When you enter the website, you'll be at the start page, when you scrolldown 1x, I'd like the page scroll untill the begining of section 2 and so on...
Imagine the sections like, home / about / contact
I tried this, but in this example, I have to write the exactly name of the elements and I would have to write one of this for each section... Is there a different way to do so ?
window.onload=function myScroll() {
x = document.getElementById("chat");
h = x.clientHeight;
x.scrollTop = h;
}
<div id="chat" style="width: 100%; height: 70px; overflow: scroll;
border: 1px solid grey">
This can be quite complicated due to the fact that this involves scrolling, catching the mouse wheel events, delay in animations, cross browser usage, swipe and touch events. Fortunately, there are plugins available to make your life easier. One of the most popular ones is Full Page.
Some of the features include:
Usage over old browsers with no CSS3 support.
Add a live menu.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Mobile and Tablet detection enabling the scrolling on them.
Usage:
Each section will be defined with a div containing the section class.
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
All you need to do is call the plugin inside a $(document).ready function:
jQuery:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Demo
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.