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
Related
I'm trying to make an entire website with all events triggered by scrolling. I just need help to achieve this effect :
I have a website with a few divs which fill all the viewport, I want the user to be able to scroll down to a named div and then when he keep scrolling the website stop scrolling vertically but the content of the div scroll horizontally. when it's done the website can scroll vertically again.
<body>
<header> </header>
<div class="scroll-vertical" id="tile1"></div>
<div class="scroll-vertical" id="tile2"></div>
<div class="scroll-vertical" id="tile3"></div>
<div class="scroll-horizontal" id="tile4">
<div class="horizontal" id="tile5"></div>
<div class="horizontal" id="tile5-a"></div>
<div class="horizontal" id="tile5-b"></div>
<div class="horizontal" id="tile5-c"></div>
</div>
<div class="scroll-vertical" id="tile6"></div>
<div class="scroll-vertical" id="tile7"></div>
<footer> </footer>
How to make that the website can only be scrolled from one div to the other ( full page)
I know there is a jquery plugin named fullpage.js which does that pretty well but as a student learning web development using plugins is not the best way to improve my skills.
Thanks for your help!
Cheers Simon
Why would you assume that ?
I doubt it can get much simpler than
$(document).ready(function() {
$('#fullpage').fullpage();
});
The author of the plugin also most likely already encountered, considered and had to solve a number of details and issues, cross-browser and non, that you have not yet had a chance to think about.
Edit :: animating divs:
$( "#bigasshorizontaldiv" ).animate({
left: "-=thewidthofoneviewport",
}, 5000, function() {
// Animation complete.
});
on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.
Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.
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.
I am trying to have tooltip for my personal website http://www.stacked.in. when I move the mouse on the link, I want to have tooltip displayed. Tooltip display content is already available inside the html page as a div element, but it is hidden. I want the tool-tip to be displayed only when I move the mouse over the link. I use jquery and jquery plug-in
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for this purpose. Even if I get the some other jquery-plugin, I would be happy.
Please note that tooltip-content div inner html would not shown. Tooltip supposed to get the element and display it.
#tooltip-content {
display:none;
width:250px;
}
here is HTML code..
<div id="widget" class="span-8 " >
<h2>Example.com</h2>
<ul>
<li><h3>Example News 1</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 1 shown only on tooltip..
</div>
</div>
</li>
<li><h3>Example News 2</h3>
<div id="tooltip-content">
<div class="published">Thu Jul 8, 2010</div>
<div class="content">
This detail news 2 shown only on tooltip..
</div>
</div>
</li>
</ul>
There would be more than 100 elements requires tooltip. Any better tool or way to handle this problem? If you give me the code sample, I would be greatful to you.. I already searched so many ways of doing it. http://code.google.com/p/jquery-very-simple-tooltip/ comes near to solution but it requires initialization for all the tooltip notes.
I've found jQuery Tools from http://flowplayer.org/tools/tooltip/index.html to have an excellent tooltip. You can use either a title attribute on the element, or use the next DOM node as the tooltip for a non-titled element.
Very flexible, and I'm sure it'll suit your needs appropriately. Good luck!
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.