For my page I have headings with a class of "head". When I click on them they are supposed to show the ul class of "content" under them, and when a new header is clicked, the list currently showing disappears and the new list for the new header appears. I have that down, but say I click header 1 and it shows list one. When I click it again, I need the list to slide back up, but I can't get it to be like that. This is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FV Runners</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="styles/normalize.css" rel="stylesheet" />
<link href="styles/my_style.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$(".head").on("click", function(){
$(".content").hide();
$(this).next(".content").slideToggle();
})
})
</script>
</head>
<body>
<div id="header">
<h1>Fox Valley Runners Club</h1>
</div> <!-- End of 'header' div-->
<div id="main">
</div> <!-- End of 'main' div-->
<div id="pics">
<div class="race_box">
<img src="images/run1.jpg" /><br />
<figcaption>5k/10k Events</figcaption>
<div class=".races" id="5k">
<h3>5k/10 Events</h3>
<div>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
</div>
</div><!-- End of '5k' div-->
</div> <!-- End of 'run1' div-->
<div class="race_box">
<img src="images/run2.jpg" /><br />
<figcaption>Half Marathon Events</figcaption>
<div class=".races" id="half">
<h3>Half Marathon Events</h3>
<div>
<h4 class="head">Fox River Marathon</h4>
<ul class="content">
<li>10/15/20<br>Pierce Park<br>Appleton</li>
</ul>
<h4 class="head">N.E.W. Half Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Winnebago Run</h4>
<ul class="content">
<li>11/27/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</div> <!-- End of 'half' div-->
</div><!-- End of 'run2' div-->
<div class="race_box">
<img src="images/run3.jpg" /><br />
<figcaption>Full Marathon Events</figcaption>
<div class=".races "id="full">
<h3>Full Marathon Events</h3>
<div>
<h4 class="head">Cheesehead Marathon</h4>
<ul class="content">
<li>9/24/20<br>Pamperin Park<br>Green Bay</li>
</ul>
<h4 class="head">Chain O'Lakes Marathon</h4>
<ul class="content">
<li>10/29/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Fox Cities Marathon</h4>
<ul class="content">
<li>11/12/20<br>Menominee Park<br>>Oshkosh</li>
</ul>
</div>
</div> <!-- End of 'full' div-->
</div> <!-- End of 'run3' div-->
</div> <!-- End of 'pics' div-->
</body>
</html>
I need help with getting the list for the header it is under to slide up when I click the same header.
You simply need to exclude the current item form the selection you call hide on. The not method works well for this.
$(document).ready(function() {
$(".head").on("click", function() {
let $list = $(this).next(".content");
$(".content").not($list).hide();
$list.slideToggle();
})
})
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="head">Mini Sprint</h4>
<ul class="content">
<li>10/30/20<br>Memorial Park<br>Appleton</li>
</ul>
<h4 class="head">Iron Horse</h4>
<ul class="content">
<li>11/06/20<br>Bay Beach Park<br>Green Bay</li>
</ul>
<h4 class="head">Twilight Trail</h4>
<ul class="content">
<li>11/13/20<br>>River's Edge Park<br>Wrightstown</li>
</ul>
Related
Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/Logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.
I'm trying to open an alert type prompt when a link is clicked.
I have the following. Relevant code is near the bottom of the html.
$(document).ready function jqmAlert(title, message) {
// set up the 'alert' page..
$("#alert-title").html(title); // Insert the title
$("#alert-content").html(message); // Insert the dialog message
$(".ui-dialog").dialog("close"); // Ensure dialog behaviour
// Now open the page..
$.mobile.changePage("#alert", "pop", false, false);
function testAlert() {
jqmAlert("Hello", "A Hello Message");
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="lab2.js"></script>
<style type="text/css">.img {
display: block; margin-left: auto; margin-right: auto;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<img src="img/logo.png" alt="Logo"
width="150" height="120"/>
<ul data-role="listview" data-inset="true">
<li>Link to Module Overview</li>
<li><a href="#lectures" data-transition=slidedown>Link to list of lectures</a></li>
<li><a href="#labs" data-transition=slideup>Link to list of labs</a></li>
<li><a href="#functions" data-transition=fade>Link to a list of functions</a></li>
</ul>
</div>
</div>
<div data-role="page" id="overview">
<div data-role="header">
<h1>Link to Module Overview</h1>
Back
</div>
<div data-role="content">
<h2>Welcome to Module Overview</h2>
<p id="">Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
</p>
<p>Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.</p>
</div>
</div>
<div data-role="page" id="lectures">
<div data-role="header">
<h1>Link to list of lectures</h1>
Back
</div>
<div data-role="content">
<ol>
<li>Introduction</li>
<li>Web-App Development</li>
<li>Using RSS data feeds</li>
</ol>
</div>
</div>
<div data-role="page" id="labs">
<div data-role="header">
<h1>Link to list of labs</h1>
Back
</div>
<div data-role="content">
<ol>
<li>HTML 5</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ol>
</div>
</div>
<div data-role="page" id="functions">
<div data-role="header">
<h1>Link to a list of functions</h1>
Back
</div>
<div data-role="content">
<ul>
<li>Test Alert</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button onclick="testAlert()">Try it</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Two Footer</h4>
</div>
<div data-role="dialog" id="alert">
<div data-role="header" data-position="fixed">
<h3><div id="alert-title"></div></h3>
</div>
<div data-role="content">
<div id="alert-content"></div>
</div>
</div>
</body>
</html>
Try removing the inline script and use the jQM pageinit method to bind the click events that launch the dialog:
<ul>
<li>Test Alert
</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button id="btnDialog">Try it</button>
$('#functions').on('pageinit', function (event) {
$("#btnDialog, #testAlert").on("click", function (e) {
testAlert();
});
});
Here is a working DEMO
i got the plugin from this link http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i attcahed the code below of my index.html.i tried many jquery plugin but it did n't work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Pharmaceutical</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favi.png" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,500,300,200,100' rel='stylesheet' type='text/css'>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script src="js/jquery.carouFredSel-5.5.0-packed.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- header -->
<header id="header">
<h1 id="logo">Retina</h1>
<!-- search -->
<div class="search">
<form action="" method="post">
<input type="text" class="field" value="keywords here ..." title="keywords here ..." />
<input type="submit" class="search-btn" value="" />
<div class="cl"> </div>
</form>
</div>
<!-- end of search -->
<div class="cl"> </div>
</header>
<!-- end of header -->
<!-- navigaation -->
<div id="menu">
<ul class="menu">
<li><span>Home</span>
<div><ul>
<li><span>About us</span></li>
<li><span>History</span>
<div><ul>
<li><span>Medicine</span>
<div><ul>
<li><span>Generic</span></li>
<li><span>Branded</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Doctors</span></li>
<li><span>pharmaceutical establishment</span></li>
<li><span>Contact us</span></li>
</ul></div>
</li>
<li><span>Doctors zone</span>
<div><ul>
<li><span>Search Doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>Doctors visits</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By state</span></li>
</ul></div>
</li>
<li><span>Doctors Reaserch</span></li>
<li><span>Doctors specialization</span></li>
</ul></div>
</li>
<li><span>Pharmaceutical zone</span>
<div><ul>
<li><span>Search Pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Door delivery</span></li>
</ul></div>
</li>
<li><span>Offer zone</span>
<div><ul>
<li><span>Medicine offer</span></li>
<li><span>Cosmetics offer</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li><span>Ask questions</span>
<div><ul>
<li><span>To doctors</span>
<div><ul>
<li><span>By area</span></li>
<li><span>By disease</span></li>
</ul></div>
</li>
<li><span>To pharmacies</span>
<div><ul>
<li><span>By area</span></li>
<li><span>Get a contact details</span></li>
</ul></div>
</li>
</ul></div>
</li>
<li class="last"><span>Online Appointment Fixing</span></li>
<li class="last"><span>Gallery</span></li>
<li class="last"><span>Donate</span></li>
<li class="last"><img src="css/images/ini.png" alt="" /></li>
</ul>
</div>
<!-- end of navigation -->
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
facebook-ico
twitter-ico
skype-ico
rss-ico
<div class="cl"> </div>
</div>
<div class="arrs">
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>MEDICAL CHECKUP</h4>
<h2>Free medical test..let's go</h2>
<p>Free CMR scan,full body scan,pressure,sugar checkup is in progress! Read more</p>
</div>
<img src="css/images/cli7.png" alt="" />
</li>
<li id="img2">
<div class="slide-cnt">
<h4>CLINICAL SHOPPING</h4>
<h2>Get near by clinical and testing shop!</h2>
<p>Find a near by clinical shop and blood testing centres! Read more</p>
</div>
<img src="css/images/cli5.png" alt="" />
</li>
<li id="img3">
<div class="slide-cnt">
<h4>DOCTORS AND MEDICAL S sHOOPING</h4>
<h2>Let check out the medicine</h2>
<p>find a nearby medical shop and Doctors..let's acquire a offer!Read more</p>
</div>
<img src="css/images/cli1.png" alt="" />
</li>
<li id="img4">
<div class="slide-cnt">
<h4>EXPLORE YOUR IDEAS AND CHECK MEDICAL STRATEGY</h4>
<h2>upload your nearby details</h2>
<p>let help others to know about all the stuff about pharmaceutical details!Read more</p>
</div>
<img src="css/images/mac-img.png" alt="" />
</ul>
</div>
<!-- end of slider -->
<!-- thumbs -->
<div id="thumbs-wrapper">
<div id="thumbs">
<img src="css/images/cli7.png" />
<img src="css/images/cli5.png" />
<img src="css/images/cli1.png" />
<img src="css/images/mac-img.png" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
<!-- end of thumbs -->
</div>
<!-- main -->
<div class="main">
<div class="featured">
<h4>Welcome to <strong>Pharmaceutical Datawarehouse.</strong> Login to know all the stuff about Doctors and Medicines <strong>FREE!</strong>Explore and acquire the Life things</h4>
GET IN TOUCH
</div>
<section class="cols">
<div class="col">
<h3>Daily Health Tips</h3>
<img src="css/images/fruit.png" alt="" class="left"/>
<h5>Make your day healthy and hygienic</h5>
<p>All foods made from meat, poultry, seafood, beans and peas, eggs, processed soy products, nuts, and seeds are considered part of the Protein Foods Group. Beans and peas are also part of the Vegetable Group. For more information on beans and peas, see Beans and Peas Are Unique Foods. <br />Read more</p>
</div>
<div class="col">
<h3>We’re Hiring</h3>
<img src="css/images/hiring.png" alt="" class="left"/>
<h5>We are looking people for doing health services </h5>
<div class="cl"> </div>
<p>Make our country disease free!let's join your hand with us to serve for the humanity!Just login to register your valuable service <br />Click here to LOGIN</p>
</div>
<div class="col">
<h3>Our Services</h3>
<ul>
<li>Get a Doctor details near by your area</li>
<li>Grab the Hospitals details near by your area </li></br></br>
<video width="250" height="240" controls>
<source src="hygiene.mp4" type="video/mp4">
<source src="hygiene.ogg" type="video/ogg">
<source src="hygiene.webm" type="video/webm">
<object data="hygiene.mp4" width="250" height="240">
<embed src="hygiene.mp4" width="250" height="240">
</object>
</video>
</ul>
</div>
<div class="cl"> </div>
</section>
<section class="entries">
<div class="entry">
<h3>Latest Blog Posts</h3>
<div class="entry-inner">
<div class="date">
<strong>01</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>pharmaceutical<br /> Reaserch</p>
<p class="meta">by John Doe / Cipla pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>28</strong>
<span>2012</span>
<em>jan</em>
</div>
<div class="cnt">
<p>Research in thyroid<br /> bones</p>
<p class="meta">by shaullah / Sun pharma</p>
</div>
</div>
<div class="entry-inner">
<div class="date">
<strong>11</strong>
<span>2012</span>
<em>feb</em>
</div>
<div class="cnt">
<p>Medical awareness<br /> Camp</p>
<p class="meta">by indian government / Awareness camp</p>
</div>
</div>
</div>
<div class="entry">
<h3>Latest Project</h3>
<h5>Recent summer projects completed by MSc Medical Microbiology students </h5>
<img src="css/images/pro.png" a alt="" />
<p> Analysis of Human Antibody Responses to a Novel Polymorphic Plasmodium falciparum Merozoite Protein from the Antigenic Rich Region of Chromosome <br />view more</p>
</div>
<div class="entry">
<h3>Testimonials</h3>
<div class="testimonials">
<p><strong>“</strong>Pharmaceutical Datawarehouse really doing well and the serving for the humanity to be healthy and hygienic”</p>
<p class="author">John Doe, <strong>Cipla Pharma</strong></p>
</div>
<div class="partners">
<h3>Our Partners</h3>
<img src="css/images/partners-img.png" alt="" />
</div>
</div>
<div class="cl"> </div>
</section>
</div>
<!-- end of main -->
<div class="cl"> </div>
<!-- footer -->
<div id="footer">
<div class="footer-nav">
<ul>
<li>Home</li>
<li>Doctors zone</li>
<li>Pharamaceutical Zone</li>
<li>Ask aQuestion </li>
<li>Get a free health tips</li>
<li>Gallery</li>
<li>Donate us</li>
</ul>
<div class="cl"> </div>
</div>
<p class="copy">© Copyright 2012<span>|</span>Sitename. Design by Nawaz</p>
<div class="cl"> </div>
</div>
<!-- end of footer -->
</div>
<!-- end of container -->
</div>
<!-- end of shell -->
</div>
<!-- end of wrapper -->
<div id="totopscroller"> </div>
<script>
$(function(){
$('#totopscroller').totopscroller({link:'http://www.jqueryscript.net'});
})
</script>
</body>
</html>
This error is about that plugin is not inited. You init plugin before jQuery:
<script src="js/jquery.totop.js" type="text/javascript"></script>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
Change to this:
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.totop.js" type="text/javascript"></script>
I'm just getting started with Foundation and trying to create a title bar with a search box. I want the search box to fill all available space in the title bar. However, nothing I've tried has quite worked:
1) I tried setting a 50% width but at small screen sizes it pushed the other buttons off the top row
2) I tried to implement this solution but couldn't get it working (see commented css)
Dynamic width for input text box (HTML)
I've set up a jsfiddle here:
http://jsfiddle.net/B7nS8/1/
Thanks for your help!
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site</title>
<meta name="description" content="Desc." />
<link rel="stylesheet" href="http://foundation.zurb.com/assets/css/templates/foundation.css" />
<script src="http://foundation.zurb.com/assets/js/modernizr.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style type="text/css">
.row { max-width: 1200px; }
/* .searchParent div { overflow: hidden; }
.searchText { width: 100%; }
.searchButton { float: right; }
*/
</style>
</head>
<body>
<!-- Navigation -->
<nav class="top-bar" data-topbar>
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
My Site
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<form>
<ul class="left">
<li class="has-form">
<div class="row collapse searchParent">
<div class="large-8 small-9 columns searchText">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns searchButton">
Search
</div>
</div>
</li>
</ul>
</form>
<ul class="right">
<li class="divider"></li>
<li>Login</li>
<li class="divider"></li>
<li>Register</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- End Top Bar -->
<div class="row">
<div class="large-12 columns">
<div class="row">
</div><!-- End Thumbnails -->
</div>
</div>
<!-- End Content -->
<!-- Footer -->
<footer class="row">
<div class="large-12 columns"><hr>
<div class="row">
<div class="large-6 columns">
<p>© Copyright no one at all. Go to town.</p>
</div>
<div class="large-6 small-12 columns">
<ul class="inline-list right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- End Footer -->
<script src="http://foundation.zurb.com/assets/js/jquery.js"></script>
<script src="http://foundation.zurb.com/assets/js/templates/foundation.js"></script>
</body>
</html>
You should look at foundations docs for topbar.js and form inputs, they're easy to follow and have given examples which do almost exactly what you are trying to do.
You shouldn't really need to write any css, that's what foundations is for.
I'd suggest something like this:
<nav class="top-bar" data-topbar="">
<!-- Title -->
<ul class="title-area">
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<!-- Top Bar Section -->
<div class="row">
<div class="large-12 columns">
<div class="row collapse">
<div class="small-10 columns">
<input type="text" placeholder="Search">
</div>
<div class="small-2 columns"> Go </div>
</div>
</div>
</div>
</nav>
Make sure you also remember to include a reference to topbar.js after foundation.min.js
Edit: Added an alternate approach
<nav class="top-bar" data-topbar="">
<ul class="title-area" style="width: 100%">
<li class="name has-form">
<div class="large-12 medium-12 small-11 columns">
<input type="text" placeholder="Find Stuff">
</div>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
</nav>