I need your help. I want to add bxslider to my html template but It's not working. I've tried everything I could imagine. When I preview my website I am rewarded with my three images all shown at once, each underneath the other. I hope someone can explain and/or show me what I should do in able to have my slider working properly.
HTML
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
<link rel="stylesheet" href="css/flexslider.css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" href="css/jquery.bxslider.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/jquery.ui.tabs.min.js"></script>
<script src="js/jQuery.BlackAndWhite.min.js"></script>
<script src="js/jquery.easing-1.3.min.js"></script>
<script src="js/jquery.fitvid.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.jtweetsanywhere-1.3.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jquery.zflickrfeed.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div id="body-wrapper">
<!-- Header -->
<div id="header" class="container clearfix">
<img src="images/logo.png" alt="" />
<!-- Navigation -->
<ul id="navigation">
<li class="current">
Home
</li>
<li>
Features
<ul>
<li>About Us</li>
<li>Pricing Tables</li>
<li>Third Navigation Level<i></i>
<ul>
<li>Amazing things</li>
<li>that bring</li>
<li>positive results</li>
</ul>
</li>
<li>Shortcodes</li>
</ul>
</li>
<li>
Blog
<ul>
<li>Single Post</li>
</ul>
</li>
<li>
Portfolio
<ul>
<li>2 Columns</li>
<li>3 Columns</li>
<li>4 Columns</li>
<li>Single Project</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
<!-- /Navigation -->
</div>
<!-- /Header -->
<!-- Content -->
<div id="content" class="container clearfix">
<h1 class="page-title">Hello, <span class="accent">We are Alco</span><br />A Creative Digital Ageny.</h1>
<ul class="slider">
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
<li>
<img src="images/content/slide_01.jpg" alt="">
</li>
</ul>
</div>
Your answers will be highly appreciated !
You need to load the below scripts
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
Before the $(document).ready(function(). Also remember the scripts should be loaded before the bxslider.css You can refer to How to install
Related
In the below snippet I have a collapse which shows if you hover over the second nav-link item. Now I want to use the Grid system inside this collapse but I can't seem to make it work.
What does not work?
The columns just display underneath one another.
How do I use the grid system inside the collapse body?
$(".menu1").hover(
function() {
$('.panel').collapse('show');
}, function() {
$('.panel').collapse('hide');
}
);
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link menu1" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="panel collapse" id="collapseExample">
<div class="card card-body">
<div class="row">
<div class="col-md-6">Test - Column</div>
<div class="col-md-6">Test - Column</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Is this what you want to do?
This is in Bootstrap 3
All I did was wrap your row in a container
Fiddle
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
Hi guys i am new for foundation 5 and i tried to make a top bar for my website but drop down is not working here is my code please help
i was googling all the day but i was not able to find a solution for this. please help me. is it possible to occur issue like this due to foundation issue?
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel = "icon" href = favi.gif type="image/x-icon"/>
<link rel="stylesheet" href="css/normalize.css">
<script src="js/jquery.js"></script>
<script src="js/foundation.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="js/foundation.js"></script>
<script src="js/foundation.dropdown.js"></script>
<script src="js/foundation.topbar.js"></script>
<title>Music Eka</title>
</head>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
you haven't initialized foundation
add this at the end of your body.
<script>
$(document).foundation();
</script>
Guys, I have following codes in my html. I'm using 320 bootstrap wp theme. I just create a menu. Its working. But that above box is not moving to menu to menu. How I do it?
For more explain. Please visit below links.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Tutorial - Cufon Font Script</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<!--CSS-->
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/color.css" rel="stylesheet" type="text/css" />
<link href="styles/noscript.css" rel="stylesheet" type="text/css" id="noscript" media="screen,all" />
<!--End testimonial-->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Ebrima_400-Ebrima_700.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1') ('h2') ('h3') ('h4') ('h5') ('h6') ('.nivo-caption h1', {textShadow: '#000 2px 0px 2px'}) ('.nivo-caption .button');
</script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/lavalamp-config.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.1.js"></script>
</head>
<body>
<div id="wrapper">
<div id="wrapper-top">
<div id="top">
<div id="top-left"><a href="index.html">
<img src="images/logo.png" alt="" width="223" height="58" />It's An Image</a></div><!-- #top-left -->
<div id="top-right">
<div id="nav">
<ul id="topnav">
<li class="active"><a href="index.html" >Home</a></li>
<li>About Us
</li>
<li>Services
<ul>
<li>Services One</li>
<li>Services Two</li>
<li>Services Three</li>
<li>Services Four</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Portfolio One</li>
<li>Portfolio Two</li>
<li>Portfolio Three</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- #topnav -->
</div><!-- #nav -->
</div><!-- #top-right -->
</div><!-- #top -->
</div><!-- #wrapper-top -->
<script type="text/javascript"> Cufon.now(); </script> <!-- to fix cufon problems in IE browser -->
<script type="text/javascript">jQuery('#noscript').remove();</script><!-- if javascript disable -->
</body>
</html>
To View That I Expect
Explains
You can see my updates viewing that link from dropbox.
You can see red box around css depth box.
It's moving well in html page
I want to do it in WP
Seeking your help here
There are two ways to create menus.
Using get_pages.
Using wordpress menu function
NO.1
<ul>
<?php
$topparentofcurrent = getTopParentPostID($post->ID);
$alltoppages = get_pages('parent=0&hierarchical=0&sort_column=menu_order&sort_order=ASC');
foreach($alltoppages as $pages){ ?>
Your html code here to repeat in loop.
<li><?php echo $pages->post_title ?></li>
<?php } ?>
</ul>
No.2
<div id="topMenu">
<div id="access">
<?php
$args = array(
'theme_location' => 'header_menu',
'menu' => 'Main Menu',
'sort_column' => 'menu_order',
'container_class' => 'menu-header'
);
wp_nav_menu($args);
?>
</div>
</div>
Now you need to do styling in css only it will automatically show the parent child behavior.
Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<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="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>