I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app.
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons.
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. How would I achieve this? My code is...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated.
EDIT: I've found an example of something similar. Here it is...link. Click a thumbnail and it shows on the iPhone.
I'd probably set it up as follows:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
$('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
<script>
$('.screenshots a').click(function(){
switch($(this).attr('id')){
case 'src1':
$('.iphone').css('background-image','url("image1.png")');
break;
case 'src2':
$('.iphone').css('background-image','url("image2.png")');
break;
}
});
</script>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li>Screen 1</li>
<li>Screen 2</li>
</ul>
It's more appropriate to use actual links instead of adding a click event to an li. Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot.
With that in place, the following jQuery should work:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch event handler, instead of click.
I'd suggest a single jQuery click handler that can set the desired image background for each one:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
$('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>
Related
I picked up HTML/CSS/Js a few days ago and I made my first very own website. I have this code that is a pop-up:
<div class="popupwindow">
<div class="popupbody">
<button class="closebtn">X</button>
<h3>Title</h3>
<p>Text</p>
</div>
</div>
And I have a menu with four buttons. The buttons look like so:
<ul>
<li class="menuone">button one</li>
<li class="menutwo"><a href="#">button two</a</li>
<li class="menuthree">button three</li>
<li class="menufour">button four</li>
</ul>
Right now my jQuery code only triggers when the button with the tag "menuone" is pressed.
My question is, can I use the same jQuery code somehow and generalize this?
You can use jquery selector for all buttons like following:
$('ul li a').on('click', function(){
// write your code here
})
I'm using Underscores as my base theme for a site, and I really dig that it includes a workable mobile navigation element as a part of the theme. But this is essentially a one-page site, and the navigation doesn't "de"-toggle when a link is clicked... because it's not leaving the page.
So I wrote a little script.
The php-generated-HTML is essentially this (simplified for this post):
<nav id="site-navigation" class="main-navigation toggled" role="navigation">
<button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="true"><i class="fa-bars fa"></i></button>
<div class="menu-main-nav-container">
<ul id="primary-menu" class="menu nav-menu" aria-expanded="true">
<li class="menu-item">Link 1</li>
<li class="menu-item">Link 2</li>
<li class="menu-item">Link 3</li>
</ul>
</div>
</nav>
And here is the script I wrote:
<script type="text/javascript">
$('.main-navigation.toggled li.menu-item a').mouseup(function(){
$('.main-navigation.toggled').removeClass('toggled');
$("button").attr("aria-expanded","false");
$("#primary-menu").attr("aria-expanded","false");
});
</script>
I'm sure there's something obvious I'm overlooking, but I don't see it.
How is your whole page setup? If this javascript isn't running from the footer you may need to wrap your javascript in a document.ready. It might be running when the elements aren't rendered yet and the mouseup event might not get attached.
Try this:
<script type="text/javascript">
$('document').ready(function(){
$('.main-navigation.toggled li.menu-item a').mouseup(function(){
$('.main-navigation.toggled').removeClass('toggled');
$("button").attr("aria-expanded","false");
$("#primary-menu").attr("aria-expanded","false");
});
});
</script>
Here's a fiddle.
http://jsfiddle.net/zsecLnd6/
If this doesn't work try putting a
alert('test');
Inside the mouseup and document ready function to see if its being run at all.
OK. Here's what it was, and I don't know why, but when I removed '.main-navigation.toggled' it worked. Doesn't make sense to me because those classes are definitely there, but I also don't care ... because it worked. :)
Thanks for your help, folks!
First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.
Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>
Hi I am trying to create a one page website that contains multiple div's about the same size as the window.The website will have a menu that will refer to each div on the page.What I want to do is animate the window when the user clicks on one of the menu links to it's coresponding div.
http://www.nistoralexandru.comule.com/div.jpg
When a user clicks on a link I need the window to animate to that div similar to this site:
http://shahkaarshah.com/
How can I do this?
The site you're linking to is built with Flash, replicating the animation of different page elements with javascript should'nt be to hard, but there's really no quick "one size fits all" function to do it.
Here's a quick example of how it's usually done :
Build some sort of HTML structure:
<div id="site">
<div id="main" class="page">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
<div id="page1" class="page">Back</div>
<div id="page2" class="page">Back</div>
<div id="page3" class="page">Back</div>
<div id="page4" class="page">Back</div>
<div id="page5" class="page">Back</div>
</div>
And animate it around the viewport with a little javascript:
$('.page a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href'),
top = $(href).css('top'),
left = $(href).css('left');
$("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});
Here's a FIDDLE
You might be meaning something like accordion?
http://jqueryui.com/demos/accordion/
There are many easy-to-use accordion plugins for jquery, so they might be easier to use for complex animations than coding from scratch.
Based on your added information, maybe a grid accordion such as this?
http://css-tricks.com/examples/InfoGrid/
Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>
You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle
Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/