Orbit doesn't show. What i have done wrong?
Note: I didn't change any documentation structure. Version 5
Code in head:
<script src="js/vendor/modernizr.js"></script>
Code in body:
<div class="row">
<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
<li> <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li class="active"> <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
<!-- Navigation Arrows --> Prev <span></span> Next <span></span> <!-- Slide Numbers -->
<div class="orbit-slide-number"> <span>1</span> of <span>3</span> </div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer"> <span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
Code before closing body:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
Please help! can some body provide me with simple working orbit code
-----------------------Update-----------
i tried this this simple code.. nothing happened
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<ul class="example-orbit" data-orbit>
<li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption"> Caption One. </div>
</li>
<li> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption"> Caption Two. </div>
</li>
<li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption"> Caption Three. </div>
</li>
</ul>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 1000,
pause_on_hover: true,
animation_speed: 500,
navigation_arrows: true,
bullets: false
}
});
</script>
</body>
</html>
I was having the same issue. Found the answer here: http://foundation.zurb.com/forum/posts/1635-orbit-inside-of-reveal-modal...
In your CSS file, specify a minimum height for the class "orbit-container".
.orbit-container {
min-height: 375px;
height:100%;
}
Tweak to suit your needs, in regards to height of the element, default Background color (Should an image not load) or whatever you want really.
EDIT 1: You can also wrap your in a div tag and set your desired height there, the orbit slider should inherit it's height from there.
I have my slider set up as follows. I'm using the data-options tag to customize the slider with the options on this page under the "Advanced" header. Using the syntax from the "Real World Example" header right underneath it:
<ul data-orbit data-options="pause_on_hover:false;
slide_number: false;
timer: false;
variable_height:true;">
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
If you just want to use all of the default settings, you can just get rid of data-options and set it up as follows:
<ul data-orbit>
<li><img src="http://placesheen.com/725/500" alt="sheen1"></li>
<li><img src="http://placesheen.com/725/900" alt="sheen2"></li>
<li><img src="http://placesheen.com/725/500" alt="sheen3"></li>
</ul>
Hope this helps!
Related
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
I have a map and a list under a map. When I scroll I want the map to stay fixed but the list under the map to scroll.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/leaflet.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Local Market</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul id="nav-mobile" class="side-nav left">
<!-- Statistics Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header"> My Statistics<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Basic Stats</li>
<li> My Top Breweries</li>
<li>My Top Styles</li>
<li>My Top Tastes</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Statistics Drop Down End -->
<li>My Lists</li>
<!-- Map Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">My Maps<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Breweries Tapped</li>
<li>Breweries Visited</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Map Drop Down End -->
<!-- Discover Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Discover<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Top Beers</li>
<li>Top Breweries</li>
<li>Top Styles</li>
<li>Top Tastes</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Discover Drop Down End -->
<!-- Drink Local Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Breweries Tapped<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Top Local Beers</li>
<li>Nearby Breweries</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Drink Local Drop Down End -->
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div id="map" style="height: 300px;" style="position:fixed;"></div>
<div id="replace"> </div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Searching Stock</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Well....
#topDivthatNeedstoStay {
width:100%;
top:0;
left:0;
height: $height; // variable replace with actual
position: fixed; // boom
background: $yellow; // variable replace with actual
}
#elementYouwantoScroll {
width:100%;
height:$height; // variable replace with actual
overflow-y:scroll; // scroll
-webkit-overflow-scrolling: touch; // for mobile might as well pop this in as well ;)
}
Something like this seems like it would work (where you set the z-index of the fixed map to a value higher than the rest of the contents):
<div id="map" style="height: 300px; position:fixed; top: 0; left: 0; z-index: 100"></div>
After playing with your live example in Chrome, here was the more specific answer that worked for me:
.navbar-fixed{
height: 10vh;
}
#map{
height: 50vh;
}
#collection{
height: 40vh;
overflow-y: scroll;
margin-top: 0;
margin-bottom: 0;
}
If you add this to your CSS, you should see what you're looking for (if I'm hearing you correctly). Since percentages are defined by forces beyond the size of the viewport when it comes to height, you're going to want to use the unit vh instead. 100vh = the height of the viewport.
In my sample CSS I've made use of the vh to add up to 100. This will make ALL of the 3 elements you have adjust to the full viewport height. Also note the dropping of the margins on the collection; these will add onto the heights and make the height just a little over 100vh, and you'll get some pretty sketch scrolling going on since the page is just barely over the size of the screen. You also may want to play with your .orange height for consistency's sake.
If you want fixed height elements AND responsive height elements, you're going to have to turn to the calc() property in CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/calc). However, if you go this route, get ready for some spotty coverage across browsers. You're probably better off going the vh only route if you want a simple, cross-browser solution. Hope this helps!
I think the answer could be quite simple by adding the css to the map:
position: fixed;
z-index: 10;
The content div ("replace" as I guessed?) could have:
position: relative;
margin-top: 300px;
z-index: 3;
Easier to debug and give an correct with actual content, the link above to live material did not have a map. Could you put up a jsfiddle?
I'm working on this website:
http://www.lakeofthewoodsadventures.com/local/index.html
I got the homepage image slider working, but it won't render the last two pages of the slider, no matter which files they are.
My question is: why is it doing that? Is it because it considers what is "off-page" not needed? The images are the same size, 1280x480 (scaled to 340 height).
Here are my settings:
Script in Head:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
useCSS: true,
itemWidth: 900,
});
});
</script>
Markup:
<div class="slide-container row">
<div class="flexslider slideEdit">
<ul class="slides">
<li>
<img src="images/slide6.JPG" alt="Slide 6">
</li>
<li>
<img src="images/slide7.JPG" alt="Slide 7">
</li>
<li>
<img src="images/slide8.JPG" alt="Slide 8">
</li>
<li>
<img src="images/slide9.jpg" alt="Slide 9">
</li>
<li>
<img src="images/slide10.jpg" alt="Slide 10">
</li>
</ul>
</div>
</div>
No, it is because those images do not exist (404 File Not Found):
http://www.lakeofthewoodsadventures.com/local/images/slide9.jpg
http://www.lakeofthewoodsadventures.com/local/images/slide10.jpg
Looks like it is a capitalization issue:
http://www.lakeofthewoodsadventures.com/local/images/slide9.JPG
http://www.lakeofthewoodsadventures.com/local/images/slide10.JPG
I'm working on the jquery slider (sequence master parallax). I would like to add a menu at the top which allows users to jump to each slide. My problem is that I don't manage to link my href to my div id. Actually, I don't know how to proceed. For example, when you click on Menu 1 it goes to the slide which has the div id="menu1". My other problem if I add between <li class="animate-in"> <div id="menu1"> ... </div></li> it breaks all the animation.
Here the code :
Sequence Theme Demo - Sliding Horizontal Parallax
if (typeof jQuery == 'undefined'){
document.write(unescape('%3Cscript src="../../scripts/jquery-min.js" %3E%3C/script%3E'));
}
</head>
<body>
<menu-->
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
</ul>
</nav>
<!--end menu-->
<div id="sequence">
<img class="sequence-prev" src="images/bt-prev.png" alt="Previous" />
<img class="sequence-next" src="images/bt-next.png" alt="Next" />
<ul class="sequence-canvas">
<li class="animate-in">
<div class="info">
<h2>Built using Sequence.js</h2>
<p>The Responsive Slider with Advanced CSS3 Transitions</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="balloon" src="images/balloon.png" alt="Balloon" />
</li>
<li>
<div class="info">
<h2>Creative Control</h2>
<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
</li>
<li>
<div class="info">
<h2>Cutting Edge</h2>
<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="kite" src="images/kite.png" alt="Kite" />
</li>
</ul>
</div>
</body>
Add a href link like this
<a href="your link">
<li class="animate-in">
<div class="info">
<h2>Built using Sequence.js</h2>
<p>The Responsive Slider with Advanced CSS3 Transitions</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="balloon" src="images/balloon.png" alt="Balloon" />
</li>
</a>
Can't seem to get my lightbox to work. Any ideas?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<title>WildFire</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</head>
<body>
<div id="wrapper">
<div id="body">
<img src="images/tempbar.png">
<div id="text">
<img class="logo" src="images/logo.png">
<ul class="info">
<li>Hours: </li>
<p>
<li> Lunch 11am - 3pm </li>
<li> Dinner 5pm - 10pm </li>
<p>
<li>Phone: </li>
<p>
<li>(607) 277-9143</li>
<p>
<li>Address: </li>
<p>
<li> 106 S Cayuga St </li>
<li>Ithaca, NY 14850 </li>
</ul>
<p class="linkouts">
<a rel="lightbox" "href="images/lunch.png">
<img src="images/lunchlink.png">
</a>
<p>
<img src="images/dinnerlink.png">
</div>
</div>
<div id="footer">
For Lounge Events Find Us On
<a href="http://www.facebook.com/pages/Ithaca-NY/WildFire-Lounge/144229581885?ref=ts" target="_blank">
<img class ="fb" src="images/loungefb.png">
</a>
Come Visit
<a href="http://www.madelines-restaurant.com/" target="_blank">
<img class="mad" src="images/madelineslogo.png">
</a>
And Our Friend
<a href="http://www.stateofithaca.com/" target="_blank">
<img class="state" src="images/stlogo.png"
</a>
</div>
</div>
</body>
</html>
Your selector is incorrect, the "#" is no longer used (deprecated, LOL I couldn't think of the word without my morning caffiene). Try this instead:
$(function() {
$('a[rel="lightbox"]').lightBox();
});
Without testing anything else or looking closely at the problem, have you tried removing the incorrectly-placed quote mark from before the href attribute?
<a rel="lightbox" href="images/lunch.png">
<img src="images/lunchlink.png">
</a>