Hi i m using bxslider plugin and used to min and max slide
but my problum is my slider allways shwo to last slide some part is hidden how to resolve it. i have try to some time but not find any solution my code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>TIL </title>
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<meta name="author" content="">
<meta name="Copyright" content="Copyright 2015. All Rights Reserved.">
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Bootstrap Core CSS -->
<link href="http://www.buylic.in/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/modern-business.css" rel="stylesheet" />
<!-- Custom Fonts -->
<link href="http://www.buylic.in/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Contact form -->
<link rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="http://www.buylic.in/css/jquery.bxslider.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="home">
<!-- Navigation -->
<div class="">Profolio</div>
<!-- Header End here -->
<!-- Body Start here -->
<!-- Header Carousel -->
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-9">
<div class="row">
asdf asd fasd fasd fasd fasd
</div>
</div>
<div class="col-md-3">
============= ------------
</div>
</div>
<!-- /.row -->
<hr>
<!-- Testimonial Section -->
<h2>Testimonials</h2>
<div class="well">
<ul class="bxslider">
<li>
<div class="testimonil">
<h5>Rakesh Kumar</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Vijay Kumar2</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rohit Kumar3</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Suresh Kumar11</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Ravi Kumar22</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
<li>
<div class="testimonil">
<h5>Rakesh Kumar33</h5>
<blockquote class="quotes">
<p>
Mes cuml dia sed in lacus ut eniascet etor ingerto aliiqt es sitet amet eismod ictorut dolore ligulate ameti dapi licdu nt mtsent lusto dolor ltisim comme. Mes cuml dia sed inertio lacus ut eniascet ingerto aliiqt sit eism odictor.
</p>
</blockquote>
</div>
</li>
</ul>
</div> </div>
<!-- /.container -->
<!-- =========================================================================== -->
<!-- =========================================================================== -->
<!-- Footer here -->
<!-- Footer here -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr />
<ul class="footerLinking">
<li>Home</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
Rohit azad
</div>
</div>
</div>
</footer>
<!-- Footer here end -->
<!-- jQuery -->
<script src="http://www.buylic.in/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="http://www.buylic.in/js/bootstrap.min.js"></script>
<script src="http://www.buylic.in/js/jquery.bxslider.min.js"></script>
<!-- Contact form -->
<script >
$(document).ready(function(){
$('.bxslider').bxSlider({
controls: false,
minSlides: 1,
maxSlides: 3,
slideWidth: 300,
slideMargin: 10
});
});
</script>
<script ></script>
</body>
</html>
just put this in your css
.bx-wrapper {
max-width: 930px!important;
}
That's because the two wrapping divs around ul.bxslider,that are generated by the BXslider plugin, have 5px border around them each set in the css, these borders are substracted from the overall calculated viewport of a slider - which is in your case 920px (3x300px + 2x10px margins), causing the last image not to be seen completely. If you unset these borders, your slider will fit just perfectly (on a large screen)
demo 1
alternatively, you can change the box-sizing of these divs to "content-box" in order there borders are not included into the total width.
.bx-wrapper, .bx-viewport {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.bx-viewport{
box-shadow:none !important;
}
Demo 2
Related
<!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">
<title>Oxygen</title>
<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Mukta" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png"> </a>
</div>
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li > HOME </li>
<li >SERVICE</li>
<li >ABOUT US</li>
<li >PORTFOLIO</li>
<li>TEAM</li>
<li >FEATURES</li>
<li >BLOG</li>
<li class="active">CONTACT</li>
</ul>
</div>
</div>
</nav>
<div id="main-content-contact" class="container-fluid">
<h2 class="text-center">Contact Us </h2>
<div id="brief-overview" class="text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Ipsum a arcu cursus vitae
</div>
<div class="row">
<div id="user-info" class="col-md-6 col-sm-6 col-xs-6">
<form>
<input class="nameEmail nameEmail1" type="text" name="fName" placeholder="Name">
<input class="nameEmail nameEmail2" type="email" name="emailAddress" placeholder="Email Address">
<br>
<input type="text" name="Subject" placeholder="Subject">
<br>
<input id="enterMessage" type="text" name="Message" placeholder="Enter Your Message">
<br>
<input id="submit-colors" type="submit" value="Send Now">
</form>
</div>
<div id="company-info" class="col-md-6 col-sm-6 col-xs-12">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere
</div>
<div id="contact-info">
<span class="fas fa-map-marker-alt"></span> Address: 2400 South Avenue A<br>
<span class="fas fa-phone fa-rotate-90"></span> Phone: +928 336 2000<br>
<span class="fas fa-envelope"></span> Email: support#oxygen.com<br>
<span class="fas fa-globe-americas"></span> Website: wwww.sitename.com
</div>
</div>
</div>
</div>
<footer id="footer-area" class="panel-footer">
<div class="container text-center">
<img src="images/logo.png" alt="the brand photo">
<div id="socail-container">
<div class="fab fa-dribbble"></div>
<div class="fab fa-facebook-f"></div>
<div class="fab fa-instagram"></div>
<div class="fab fa-linkedin-in"></div>
<div class="fab fa-tumblr-square"></div>
<div class="fab fa-twitter"></div>
<div class="fas fa-envelope"></div>
</div>
</div>
</footer>
<div id="copyright" class="container-fluid">
<span >© 2019 Oxygen Theme.</span>
<span >Designed by Themeum</span>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I use bootstrap 3 in my project, and when i zoom out the browser window, the collapse button appears but when i click on it, nothing happens
taking into consideration,i'm putting this piece of code at the very end of the body element
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
and you can see the entire html document by clicking on
here!
or you can see it directly at the following
So there are two issues that i found, first being your resources are not linked properly. Please check again your js files are properly put with the same names under the js directory.
Other easier way i would suggest is to use cdn. Use these three cdn
<!-- bootstrap-3 cdn -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
put these three links in your document's head section in this same order.
The second issue is that in the "data-toggle" attribute of your toggle button there is a space before the id of the collapsible division. Remove that space.
<button type="button" class="navbar-toggle collapsed" data-toggle=" collapse" data-target="#myNav">
Here is the working pen of your code.
I have a problem regarding the magnific popup, so whenever i type the code in HTML, its working but whenever I try using Javascript to generate the HTML element that have popup menu, the popup not appear.
Here my HTML Code to show the popup using HTML Code and its working
<!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">
</head>
<body>
<div class="right-side">
<div class="logo"></div>
<div class="right-content">
<div class="right-content-row profile">
<h6>Welcome,</h6>
<p><b id='customer_email' name ='customer_email'></b></p>
<!--You are being served by <br><br> <b id ='emp_name' name='emp_name'></b>-->
</div>
<div class="right-content-row order-total">
TOTAL <span>150</span>
</div>
<div class="right-content-row poweredby">
<p>POWERED BY <span class="logo-ifabula" onClick="document.location='http://ifabula.com'" style="cursor:pointer"></span></p>
</div>
</div>
</div>
<div class="left-side">
<div class="top-nav">
<ul id='tab' name='tab'>
</ul>
</div>
<div class="sub-nav">
<ul id='tab_child' name='tab_child'>
</ul>
</div>
<div class="left-side-content">
<div class="catalog-content">
<b id='prod_item'></b>
<div id='prod_item_display'>
</div>
<!--<h1>Raciones</h1> -->
<b id='ts'>
<ul>
<li>
<a class="open-popup-link" href="#popup-product">
<img src="http://localhost/tapas//img/prod_gallery/Aglio_Salmon_thumb.jpg">
<h2>Aglio Salmon</h2>
<p class="price">70,000</p>
</a>
</li>
<li><a href="#popup-product" class="open-popup-link">
<img src="images/img-product.jpg" />
<h2>Olives</h2>
<p class="price">30</p>
</a></li>
</ul>
</b>
</div>
<p class="footnote" style="display:none;">All prices in thousand Indonesian Rupiah. Prices can be change in anytime without notice. Tax & Service charges are not included!</p>
</div>
</div>
<p id='popup_item' name='popup_item'></b>
<div id="popup-product" class="popup-product mfp-hide">
<div class="popup-product-img">
<img src="images/img-product.jpg" />
<h1>Bread with Tomato Sauce & Iberico Ham</h1>
</div>
<p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
<div class="popup-product-option">
QUANTITY <input id="down" onClick="setQuantity('down');" type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up" onClick="setQuantity('up');" type="button" class="plus" /> <input type="submit" value="ORDER" />
</div>
</div>
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.9.0.js"></script> -->
<!-- Magnific Popup core JS file -->
<script src="js/catalog2.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/default.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<script type="text/javascript" src="js/jquery.smartCart-2.0.js"></script>
</body>
</html>
Here the Javascript code to generate the list of item from JSON Return and the popup is not working
$.ajax({
type: "POST",
url : "http://127.0.0.1/menu/menu_controller/display_child_item/"+child_category_id[item_child],
data : "CategoryUUID="+child_category_id,
dataType: "json",
success: function(result_item)
{
for (var prod_item in result_item)
{
x = x+1;
if(x == 1)
{
prod_display.push('<h1>'+child_name[0]+'</h1>');
prod_display.push('<ul>');
prod_display.push("<li><a class='open-popup-link' href='#popup-product'><img src='http://localhost/tapas/"+result_item[prod_item].image_thumbnail.toString()+"'/><h2>"+result_item[prod_item].product_name.toString()+"</h2><p class='price'>"+numberWithCommas(result_item[prod_item].price.toString())+"</p></a></li>");
popup_product.push('<div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"><div class="popup-product-img"><img src="images/img-product.jpg" /> <h1>Bread with Tomato Sauce & Iberico Ham</h1></div><p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p><div class="popup-product-option"> QUANTITY <input id="down" type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up" type="button" class="plus" /> <input type="submit" value="ORDER" /></div></div>');
}
else if(x != 1)
{
prod_display.push('<li><a id="test" class="open-popup-link" href="#popup-product" class="open-popup-link"><img src="http://localhost/tapas/'+result_item[prod_item].image_thumbnail.toString()+'"/><h2>'+result_item[prod_item].product_name.toString()+'</h2><p class="price">'+numberWithCommas(result_item[prod_item].price.toString())+'</p></a></li>');
popup_product.push('<div id="popup-product'+result_item[prod_item].ProductUUID.toString()+'" class="popup-product mfp-hide"><div class="popup-product-img"><img src="images/img-product.jpg" /> <h1>Bread with Tomato Sauce & Iberico Ham</h1></div><p class="popup-product-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p><div class="popup-product-option"> QUANTITY <input id="down" type="button" class="minus" /> <input id="quantity" type="text" value="1" min="0" /> <input id="up" type="button" class="plus" /> <input type="submit" value="ORDER" /></div></div>');
}
}
prod_display.push('</ul>');
document.getElementById("prod_item_display").innerHTML = prod_display.join('');
}
COuld you please help me to find out what is the solution for this. Already do countless trial and errors but no luck :(
try below code .it is event delegation isue
$(document).on('click', '.open-popup-link',function(){
var popupSRC = $(this).parent('li').next('div.popup-product');
$.magnificPopup.open({
items: {
src: popupSRC,
},
type: 'inline'
});
});
I was here this morning asking on how to get started on bootstrap 3, some good fellows guided and supported me.
Attached is a picture of the progress I have made to far, I know there's still long way to go and I'm still learning.
But right now, I'm stuck on this jumbotron part. I am trying to make the text and the picture to be horizontally align but I have been battling with it for hours. Can some one please help me out on how to go about it. Also, I will like to change the background color from what it is now to a different color.
Sorry I just realized that I'm not yet eligible to post and image.
Here is the script:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Techy Support</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="home-page">
<section class="jumbotron">
<div class="container">
<h1 class="mission-statement">
Making IT at home <br />
Easy and Affordable
<div class="text-right">
<img class="img-rounded" style="width: 200px;" src="bac.jpg" class="img-responsive center-block" />
</div>
</h1>
</div>
</section>
</div>
<!-- <div class="jumbotron">
<div class="container">
<h1>Making IT at home <br> Easy and Affordable!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
<img class="jumbotron-image hidden-sm hidden-xs hidden-md" src="bac.jpg" />
</div>
</div> -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I'm sure some would understand the challenge I'm facing.
Thanks
You can use the col-**-* classes provided by bootstrap for your layout. For background color, apply a background-color style to your jumbotron element.
<div id="home-page">
<section class="jumbotron" style="background-color:#336699">
<div class="container">
<div class="col-xs-6">
<h1 class="mission-statement">
Making IT at home <br />
Easy and Affordable
</h1>
</div>
<div class="col-xs-6">
<img class="img-rounded" style="width: 200px;" src="mac.jpg" class="img-responsive center-block" />
</div>
</div>
</section>
</div>
http://jsfiddle.net/d5x2ho7r/1/
I am making a test website for a future project and I am having jQuery issues. It is a static HTML5 website with a social widget, when I remove one of the jQuery lines, the site loses its styling and the widget looks pretty. When I add that jQuery I removed, the site will look good, but the widget will look really bad. How can I fix this conflict issue? I will add the code to the main website on here:
<!DOCTYPE HTML>
<html><head>
<title>test site</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!-- Social Widget Goodies Start -->
<link rel="stylesheet" type="text/css" href="css/dcsmt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/js/jquery.plugins.js"></script>
<script type="text/javascript" src="inc/js/jquery.site.js"></script>
<script type="text/javascript" src="js/jquery.social.media.tabs.1.7.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#social-tabs').dcSocialTabs({
widgets: 'twitter,facebook',
twitterId: '20782546',
facebookId: '69431101263',
fblikeId: '69431101263',
fbrecId: 'https://www.facebook.com/ArkansasState',
tweetId: '20782546',
autoClose: true,
facebook: {
text: 'content'
}
});
});
</script>
<!-- Social Widget Goodies End... -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><img style="margin-top:10px;" src="images/logo_tiny.png" width="147" height="50" alt="logo"></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
Main Menu
<ul>
<li>Lorem ipsum dolor</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
<li>
Phasellus consequat
<ul>
<li>Lorem ipsum dolor</li>
<li>Phasellus consequat</li>
<li>Magna phasellus</li>
<li>Etiam dolore nisl</li>
</ul>
</li>
<li>Veroeros feugiat</li>
</ul>
</li>
<li>Link#01</li>
<li class="break">Link#02</li>
<li>Link#03</li>
</ul>
</nav>
</div>
<!-- Hero -->
<section id="hero" class="container">
<header>
<h2>ASTATE EMERGENCY PORTAL
<br/>
our main website is currently down</h2>
</header>
<p>Please scroll down and use the links provided in this portal
to access external applications like<br> e-mail, blackboard, etc. etc.</p>
<ul class="actions">
<li>www.astate.edu</li>
</ul>
</section>
</div>
<!-- Features 1 -->
<div class="wrapper">
<div class="container">
<div class="row">
<section class="6u feature">
<div class="image-wrapper first">
<img src="images/pic01.jpg" alt="" />
</div>
<header>
<h2>For Students<br />
Access your E-mail Account Here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
<section class="6u feature">
<div class="image-wrapper">
<img src="images/pic02.jpg" alt="" />
</div>
<header>
<h2>For Faculty & Staff<br />
Access your E-mail Account here</h2>
</header>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel
sem sit dolor neque semper magna. Lorem ipsum dolor sit amet consectetur et sed
adipiscing elit. Curabitur vel sem sit.</p>
<ul class="actions">
<li>Enter</li>
</ul>
</section>
</div>
</div>
</div>
<!-- Promo -->
<div id="promo-wrapper">
<section id="promo">
<h2>Live social updates</h2>
Do not press
</section>
</div>
<!-- Features 2 -->
<div class="wrapper">
<section class="container">
<header class="major">
<h2>Sed magna consequat lorem curabitur tempus</h2>
<p>Elit aliquam vulputate egestas euismod nunc semper vehicula lorem blandit</p>
</header>
<div class="row features">
<section class="4u feature">
<div class="image-wrapper first">
<img src="images/pic03.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic04.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
<section class="4u feature">
<div class="image-wrapper">
<img src="images/pic05.jpg" alt="" />
</div>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur
vel sem sit dolor neque semper magna lorem ipsum.</p>
</section>
</div>
<ul class="actions major">
<li>Elevate my awareness</li>
</ul>
</section>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<div id="footer" class="container">
<header class="major">
<h2>Keep in touch with us</h2>
<p>Lorem ipsum dolor sit amet consectetur et sed adipiscing elit. Curabitur vel sem sit<br />
dolor neque semper magna lorem ipsum feugiat veroeros lorem ipsum dolore.</p>
</header>
<div class="row">
<section class="6u">
<form method="post" action="#">
<div class="row collapse-at-2 half">
<div class="6u">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u">
<input name="email" placeholder="Email" type="text" />
</div>
</div>
<div class="row half">
<div class="12u">
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row half">
<div class="12u">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Clear form" /></li>
</ul>
</div>
</div>
</form>
</section>
<section class="6u">
<div class="row collapse-at-2 flush">
<ul class="divided icons 6u">
<li class="icon fa-twitter"><span class="extra">twitter.com/</span>untitled</li>
<li class="icon fa-facebook"><span class="extra">facebook.com/</span>untitled</li>
<li class="icon fa-dribbble"><span class="extra">dribbble.com/</span>untitled</li>
</ul>
<ul class="divided icons 6u">
<li class="icon fa-instagram"><span class="extra">instagram.com/</span>untitled</li>
<li class="icon fa-youtube"><span class="extra">youtube.com/</span>untitled</li>
<li class="icon fa-pinterest"><span class="extra">pinterest.com/</span>untitled</li>
</ul>
</div>
</section>
</div>
</div>
<div id="copyright" class="container">
<ul class="menu">
<li>©2014 - ASTATE Emergency Portal. All rights reserved.</li>
</ul>
</div>
</div>
</body>
<div id="social-tabs"></div>
</html>
This is caused by the ordering of your scripts. Rather than just removing js/jquery.min.js, you should move your other jQuery script to this position:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
...
...otherwise the JavaScript files located above this jQuery include's current position may not wait for jQuery to load before attempting to execute then not-yet-present jQuery calls.
I am trying to use jQuery.localScroll, and the onBefore and onAfter events are being triggered but it is not scrolling. Below is the html followed by the javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"[]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_head">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/Site.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="../scripts/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="../scripts/Site.js" type="text/javascript"></script>
</head>
<body id='blue-phoenix'>
<div id="wrapper">
<div id="topNavigation">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Who For</li>
<li>Blue Lounge</li>
<li>Bits n Bobs</li>
<li>Connect</li>
</ul>
</div>
<div id="home">
<div class="inner">
<img alt="Blue Phoenix" src="/media/50/logo_col.png" />
</div>
</div>
<div id="body">
<form method="post" action="/default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MWRk5+wj/nfDCFMUtHbyaacEc3PDsFKgOQnVhOrvbLH95Q8=" />
</div>
<div id="who-we-are" class="section" style="background-image:url(bkgrd02.jpg)">
<div class="inner">
<div class="content">
<div class="inner-content">
<h3>Who We Are</h3>
<p>Duis vitae urna dui. Nullam vel lobortis erat. Cras suscipit lorem vel nulla sodales vel facilisis diam.</p>
<a class="action" href="/who-we-are.aspx">Read more...</a>
</div>
</div>
</div>
</div>
<div id="what-we-do" class="section" style="background-image:url(bkgrd02.jpg)">
<div class="inner">
<div class="content">
<div class="inner-content">
<h3>Who We Are</h3>
<p>Duis vitae urna dui. Nullam vel lobortis erat. Cras suscipit lorem vel nulla sodales vel facilisis diam.</p>
<a class="action" href="/who-we-are.aspx">Read more...</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Below is the javascript
$.noConflict();
jQuery(document).ready(function ($) {
/*** DROPDOWN MENU ***/
$("#topNavigation ul li").hover(function () {
$("ul:hidden", this).slideDown("fast");
}, function () {
$("ul:visible", this).slideUp("slow");
});
$("#topNavigation ul ul").hide();
/*** LOCALSCROLL ***/
$.localScroll({
onBefore: function (e, anchor, $target) {
// The 'this' is the settings object, can be modified
},
onAfter: function (anchor, settings) {
// The 'this' contains the scrolled element (#content)
}
});
});
Any ideas why the scroll effect is not happening?
The following CSS seemed to be causing the issue
html, body { height: 100%; overflow: auto; }
Removing it seemed to solve the problem.