See: http://sthliquidations.com
I just downloaded and installed bxSlider. It seems to be exactly what I want, but I'm having several issues: I'm using Chrome
1) No matter what slide I'm on, the last slide shows after transition (except the first slide).
2) When I try to adjust the modes, the slider becomes it's basic UL list.
Process:
Header code:
<head>
<!-- NAME THE PAGE -->
<title><?php $title ?></title>
<!-- GET THE FAIRY DUST AND DUST BUNNIES -->
<link rel="stylesheet" type="text/css" href="scripts/basic.css" />
<script type="text/javascript" src="contact-files/contact-form.js"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<!-- bxSlider -->
<script src="/scripts/jquery.bxslider.min.js"></script>
<link href="/scripts/jquery.bxslider.css" rel="stylesheet" />
<script src="/scripts/muscles.js"></script>
<!-- TELL GOOGLE WHAT IT WANTS TO HEAR -->
<meta name="description" content="<?php $description ?>">
<meta name="keywords" content="<?php $keywords ?>">
<!-- FIX ENCODING ERROR -->
<meta charset="UTF-8">
</head>
Header file:
<!-- =============== -->
<!-- BODY -->
<!-- =============== -->
<body>
<div id="header">
<div class="logo">
</div>
<!-- TITLE -->
<div class="headerwindow">
<div class="logo-box">
<img src="/images/logo_white.png" alt="STH Liquidations" class="logo_image" />
</div>
<div class='title'>
<?php
if ($title != "STH Liquidations")
{
echo $title;
}
?>
<p class='contact_info'>Phone: (843) 452-5451</p>
<p class='contact_info'>Monday - Friday: 8:30 - 5:00 PM</p>
</div>
</div>
</div>
<div class="clear"></div>
Index File:
<?php include "parts/hot_deals.php"; ?>
<p class="head1">Welcome to <strong>STH Liquidations, Inc.</strong></p>
<p>With <strong><i>over ten years experience</i></strong> in the overstock and liquidation business, we at STH Liquidation, Inc feel confident that we can meet your specific needs. STH buys and sells <strong>NAME BRAND</strong> liquidated merchandise from all major retailers, catalog companies and big box stores.
</p>
<p>Whether you are <strong>a retailer, wholesaler, auctioneer, online seller, exporter, flea marketer, mom and pop store,</strong> or whatever you specific venture is, we at STH Liquidations, Inc are confident that we can supply your needs and <strong>help maximize your profits</strong>. We carry truckloads of general merchandise, furniture, housewares, tools, toys, sporting goods, jewelry lots, apparel and much more.</p>
<p>We carry product from most all major retailers so our customers know that they are getting the name brands they are looking for.</p>
<p>We <strong>DO NOT</strong> buy from others warehouses in which merchandise most likely has been “cherry picked”. We buy and ship direct to the customers from all the major retail reclamation and distribution centers. <strong>Shipping direct from these facilities saves you money.</strong> Another money saving advantage is that our low overhead. Our business philosophy is simple; we keep our costs low so we can keep your costs low. Money saved is money made!</p>
<p>Browse our website at your leisure, but please call us with any questions you may have or to place your order.</p>
<p>Remember to join our mailing list to receive up to date listings and our <strong>hot deals</strong>.</p>
</div>
<div id="hotdeals">
<p class="head2">Hot Deals!</p>
<div class="deals">
<p class="deal_title">K-Hardgoods</p>
<p class="deal_desc">Housewares, toys, tools,sporting goods and much more. Several loads available. See attachment</p>
<p class="deal_price">Price $139 per pallet (single loads)<br />Price $135 per pallet (double load)</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">SRS Tool Truckload</p>
<p class="deal_desc">CR*STSM*N TOOLS AND MUCH MORE <br />Saws, compressors, blowers, edgers. saber saws, table saws and much more</p>
<p class="deal_price">27 PALLETS--WHLS $66,649.32 <br />SELL PRICE $12,900</p>
<p class="deal_pdf">Download PDF</p>
</div>
<div class="deals">
<p class="deal_title">W*M Power wheels</p>
<p class="deal_desc">Ride on toy truckloads
<br />150-180 units per truckload
<br />Customer returns</p>
<p class="deal_price">Price only $5,900</p>
</div>
</div>
<div class="clear"></div>
<div id="image_holder">
<ul class="bxslider">
<li><img src="/slider/pic1.jpg" /></li>
<li><img src="/slider/pic2.jpg" /></li>
<li><img src="/slider/pic3.jpg" /></li>
<li><img src="/slider/pic4.jpg" /></li>
<li><img src="/slider/pic5.jpg" /></li>
<li><img src="/slider/pic6.jpg" /></li>
</ul>
</div>
(leaving the footer out, it's not important)
My JS File (renders UL list of images):
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: fade
});
});
My JS File (renders slideshow that "almost" works):
$(document).ready(function(){
$('.bxslider').bxSlider();
});
Errors
Chrome Inspect Element is throwing this errors:
Uncaught ReferenceError: fade is not defined muscles.js:3
(anonymous function) muscles.js:3
j jquery.min.js:2
k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K
I have made sure that all the files that came with the download have been included. I have followed the only instructions I could find on the website. Can anyone see what might be going wrong?
I had the same issue. I fixed it by setting useCSS: false in the js file. When useCSS is set to false bxslider uses jQuery animate() instead of CSS transitions for horizontal scrolling.
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
Closed 2 years ago.
I am working on an assignment where I am creating a webpage about sharks and I need to know how I can center my images. I have already tried the align attribute in my code and my images are still not centered. I would like the images to be in the center of the screen.
Here is my image code:
enter image description here
Here are the images on the actual webpage:
enter image description here
Here is my code (if needed)
<!DOCTYPE html>
<html>
<head>
<!-- TITLE-->
<title>All About Sharks</title>
</head>
<!-- BACKGROUND COLOR -->
<body style="background-color:#9FB4E5">
<!-- HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>
<!-- A PART OF HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:20px">A Page Dedicated to Sharks</h1>
<!-- MY WEBPAGE LINK -->
Endangered Sharks Page
<!-- MY EMAIL LINK-->
Send Email Here
<hr>
<!-- HEADER 2 -->
<h2 style ="color:White;font-size:20px;font-family:Times">What Are Sharks?</h2>
<!-- FIRST PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton. The common myth is that sharks attack humans whenever humans are within the vicinity of them, but of all 470 species, only somewhere around a dozen are dangerous to humans, and even the ones that are do not prefer to eat them.</b></i></p>
<!-- TWO OF MY IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 3 -->
<h3 style ="color:White;font-family:Times;font-size:20px"> Where Are Sharks Found?</h3>
<!-- MY SECOND PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks live in all five of the Earth's oceans: The Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshwater/saltwater lakes and some rivers too. Oftentimes, sharks swim in the Epipelagic zone (the topmost layer of the ocean) which is where human beings swim as well, but sharks rarely bother them.</b></i></p>
<!-- MORE IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 4 -->
<h4 style ="color:White;font-family:Times;font-size:20px"> What Do Sharks Eat?</h4>
<!-- MY THIRD PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, seals, birds, and even other sharks. As apex predators, sharks play an important role in the oceanic ecosystem by maintaining the diversity of the species below them and keeping balance with competitors. Just to give an example of how important these creatures are, a decrease in the shark population could result in the overgrowth of algae or the extinction of smaller animals like scallops who rely on sharks to eat their predators. </b></i></p>
<!-- MORE IMAGES -->
<img align="center" src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="340" height="200">
<img align="center" src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 5 -->
<h5 style ="color:White;font-family:Times;font-size:20px">How Are Sharks Being Killed Everyday?</h5>
<!-- THE FOURTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>According to IUCN (International Union for Conservation of Nature) analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat loss.</b></i></p>
<!-- MY INTERACTIVE PIE CHART (TAKEN FROM THE W3SCHOOLS HOMEPAGE) -->
<div id="piechart"></div>
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Shark Deaths', 'Killing Methods'],
['Commercial Shark Finning/Medicine/Shark Fin Soup', 48],
['Overfishing', 4],
['Fisheries Bycatch', 39],
['Habitat Loss (Pollution, Climate Change, Fishing)', 91],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Percentage of Shark Killing Methods Everyday', 'width':450, 'height':300};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<hr>
<!-- HEADER 6 -->
<h6 style ="color:White;font-family:Times;font-size:20px"> What Is The Purpose Of This Page And What Can You Do To Stop Shark Cruelty?</h6>
<!-- MY FIFTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to and educate about endangered marine animals, particularly sharks. Shark lives are being threatened everyday by human activities and because of these activities, it's not just shark lives that are threatened but other aquatic animal's lives as well because they depend on sharks in so many ways. This page was meant to motivate its readers into standing up for the well-being of sharks. </b></i></p>
<!-- A PART OF HEADER 6-->
<h6 style ="color:White;font-family:Times;font-size:20px"><u>List Of Things You Can Do</u></h6>
<!-- MY LIST -->
<ul>
<li><b>Get the message out on social media via Instagram, Facebook, Twitter, etc.</b></li>
<li><b>Start a campaign at work or school.</b></li>
<li><b>Start a protest.</b></li>
<li><b>Make a petition.</b></li>
<li><b>Begin a fundraiser.</b></li>
</ul>
<hr>
</body>
</html>
First you need to encapsulate your images in a div, then if you want to display your images side by side on the center you can use the css property display: flex; and justify-content: center.
<div style="display: flex; justify-content: center;">
<img src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
</div>
This might be what you need. I made a div around the first images and styled it so the images will be in the center of the page.
<!DOCTYPE html>
<html>
<head>
<!-- TITLE-->
<title>All About Sharks</title>
</head>
<!-- BACKGROUND COLOR -->
<body style="background-color:#9FB4E5">
<!-- HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>
<!-- A PART OF HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:20px">A Page Dedicated to Sharks</h1>
<!-- MY WEBPAGE LINK -->
Endangered Sharks Page
<!-- MY EMAIL LINK-->
Send Email Here
<hr>
<!-- HEADER 2 -->
<h2 style ="color:White;font-size:20px;font-family:Times">What Are Sharks?</h2>
<!-- FIRST PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton. The common myth is that sharks attack humans whenever humans are within the vicinity of them, but of all 470 species, only somewhere around a dozen are dangerous to humans, and even the ones that are do not prefer to eat them.</b></i></p>
<div style="display: flex; justify-content: center">
<!-- TWO OF MY IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">
</div>
<hr>
<!-- HEADER 3 -->
<h3 style ="color:White;font-family:Times;font-size:20px"> Where Are Sharks Found?</h3>
<!-- MY SECOND PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks live in all five of the Earth's oceans: The Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshwater/saltwater lakes and some rivers too. Oftentimes, sharks swim in the Epipelagic zone (the topmost layer of the ocean) which is where human beings swim as well, but sharks rarely bother them.</b></i></p>
<!-- MORE IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 4 -->
<h4 style ="color:White;font-family:Times;font-size:20px"> What Do Sharks Eat?</h4>
<!-- MY THIRD PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, seals, birds, and even other sharks. As apex predators, sharks play an important role in the oceanic ecosystem by maintaining the diversity of the species below them and keeping balance with competitors. Just to give an example of how important these creatures are, a decrease in the shark population could result in the overgrowth of algae or the extinction of smaller animals like scallops who rely on sharks to eat their predators. </b></i></p>
<!-- MORE IMAGES -->
<img align="center" src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="340" height="200">
<img align="center" src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="344" height="200" class="center">
<hr>
<!-- HEADER 5 -->
<h5 style ="color:White;font-family:Times;font-size:20px">How Are Sharks Being Killed Everyday?</h5>
<!-- THE FOURTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>According to IUCN (International Union for Conservation of Nature) analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat loss.</b></i></p>
<!-- MY INTERACTIVE PIE CHART (TAKEN FROM THE W3SCHOOLS HOMEPAGE) -->
<div id="piechart"></div>
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Shark Deaths', 'Killing Methods'],
['Commercial Shark Finning/Medicine/Shark Fin Soup', 48],
['Overfishing', 4],
['Fisheries Bycatch', 39],
['Habitat Loss (Pollution, Climate Change, Fishing)', 91],
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'Percentage of Shark Killing Methods Everyday', 'width':450, 'height':300};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<hr>
<!-- HEADER 6 -->
<h6 style ="color:White;font-family:Times;font-size:20px"> What Is The Purpose Of This Page And What Can You Do To Stop Shark Cruelty?</h6>
<!-- MY FIFTH PARAGRAPH -->
<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to and educate about endangered marine animals, particularly sharks. Shark lives are being threatened everyday by human activities and because of these activities, it's not just shark lives that are threatened but other aquatic animal's lives as well because they depend on sharks in so many ways. This page was meant to motivate its readers into standing up for the well-being of sharks. </b></i></p>
<!-- A PART OF HEADER 6-->
<h6 style ="color:White;font-family:Times;font-size:20px"><u>List Of Things You Can Do</u></h6>
<!-- MY LIST -->
<ul>
<li><b>Get the message out on social media via Instagram, Facebook, Twitter, etc.</b></li>
<li><b>Start a campaign at work or school.</b></li>
<li><b>Start a protest.</b></li>
<li><b>Make a petition.</b></li>
<li><b>Begin a fundraiser.</b></li>
</ul>
<hr>
</body>
</html>
So I’m trying to work on a platform for my church. Essentially, when youth come into our new media center, we want:
youth to click one of the provided emotions based on how they’re feeling
a scripture to popup associated with the emotion they selected
I’m new to coding (have only been doing it for a few weeks outside of work) and I’m stumped as to where I’ve gone wrong.
Originally I was using a hover feature, but now I want to upgrade to a popup as mentioned in bullet 2.
Here’s my codepen: https://codepen.io/mj2913/pen/pXgxOz
<div class="happy-thumb popup" onclick="myFunction()">
<p>happy
<span class="popup-thumb-span" id="happyPopup">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</span>
</p>
</div>
<script>
function myFunction() {
var popup = document.getElementById("happyPopup");
popup.classList.toggle("show");
}
</script>
Try this. I've added jQuery modal popup. Replace your HTML page with below
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<head>
<h1>Welcome to Friendship Community Church's Youth Media Center</h1>
<h2>How Are You Feeling Today?</h2>
</head>
<div class="col1">
<button class="happy-thumb popup" onclick="$('#happyPopup').modal();">
<p>happy
<span class="popup-thumb-span" id="happyPopup" rel:"modal:open">I praise you, for I am fearfully and wonderfully made. Wonderful are your works; my soul knows it very well. Psalm 139:14</>
</p>
</div>
<div class="sad-thumb popup">
<p>sad
<span class="popup-thumb-span" id="sadPopup">Therefore confess your sins to each other and pray for each other so that you may be healed. The prayer of a righteous man is powerful and effective. James 5:16</span>
</p>
</div>
<div class="surprised-thumb popup">
<p>surprised
<span class="popup-thumb-span" id="surprisedPopup">Trust in the Lord with all your heart and lean not on your own understanding; in all your ways submit to Him, and He will make your paths straight. Proverbs 3:5-6</span>
</p>
</div>
<div class="anxious-thumb popup">
<p>anxious
<span class="popup-thumb-span" id="anxiousPopup">Do not be anxious about anything, but in everything, by prayer and petition, with thanksgiving, present your requests to God. Phillipians 4:6</span>
</p>
</div>
</div>
<div class="col2">
<div class="fearful-thumb popup">
<p>fearful
<span class="popup-thumb-span" id="fearfulPopup">Surely God is my salvation; I will trust and not be afraid. The LORD himself is my strength and my defense; he has become my salvation. Isaiah 12:2</span>
</p>
</div>
<div class="confident-thumb popup">
<p>confident
<span class="popup-thumb-span" id="confidentPopup">I have told you these things, so that in me you may have peace. In this world you will have trouble. But take heart! I have overcome the world. John 16:33</span>
</p>
</div>
<div class="tired-thumb popup">
<p>tired
<span class="popup-thumb-span" id="tiredPopup">Come to me, all you who are weary and burdened, and I will give you rest. Matthew 11:28</span>
</p>
</div>
<div class="joyful-thumb popup">
<p>joyful
<span class="popup-thumb-span" id="joyfulPopup">Sing for joy, O heavens, and exult, O earth; break forth, O mountains, into singing! For the Lord has comforted his people and will have compassion on his afflicted. Isaiah 49:13</span>
</p>
</div>
</div>
<div class="col3">
<div class="discouraged-thumb popup">
<p>discouraged
<span class="popup-thumb-span" id="discouragedPopup">Have I not commanded you? Be strong and courageous. Do not be afraid; do not be discouraged, for the Lord your God will be with you wherever you go. Joshua 1:9</span>
</p>
</div>
<div class="pitiful-thumb popup">
<p>pitiful
<span class="popup-thumb-span" id="pitifulPopup">Humble yourselves, therefore, under God’s mighty hand, that He may lift you up in due time. Cast all your anxiety on Him because He cares for you. 1 Peter 5:6-7</span>
</p>
</div>
<div class="impatient-thumb popup">
<p>impatient
<span class="popup-thumb-span" id="impatientPopup">Jesus said, I am the way, the truth, and the life. No one comes to the Father except through Me. John 14:6</span>
</p>
</div>
<div class="cautious-thumb popup">
<p>cautious
<span class="popup-thumb-span" id="cautiousPopup">'For I know the plans I have for you', declares the LORD, 'plans to prosper you and not to harm you, plans to give you hope and a future'. Jeremiah 29:11</span>
</p>
</div>
</div>
<div class="col4">
<div class="unloved-thumb popup">
<p>unloved
<span class="popup-thumb-span" id="unlovedPopup">Love is patient, love is kind. It does not envy, it does not boast, it is not proud. 1 Corinthians 13:4</span>
</p>
</div>
<div class="hopeless-thumb popup">
<p>hopeless
<span class="popup-thumb-span" id="hopelessPopup">Jesus said to him, 'I am the way, and the truth, and the life. No one comes to the Father except through me'. John 14:6</span>
</p>
</div>
<div class="confused-thumb popup">
<p>confused
<span class="popup-thumb-span" id="confusedPopup">Be on your guard; stand firm in faith; be courageous; be strong. 1 Corinthians 16:13</span>
</p>
</div>
<div class="stressed-thumb popup">
<p>stressed
<span class="popup-thumb-span" id="stressedPopup">So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand. Isaiah 41:10</span>
</p>
</div>
</div>
</div>
</div>
<p>Code inspired by MIT. All rights reserved to them</p>
Output
jQuery Library - https://jquerymodal.com/
Another day, another challenge. This should be an easy one. I got the accordion to render, but it will not function. What am I doing wrong? I get an error "Can't find variable: jQuery". This refers to the last line of the accordion.min.js file which is }( jQuery, window, document);.
Here is the entire HTML.
<!DOCTYPE html>
<html>
<title> Semantic UI - Accordian </title>
<h1>Semantic UI Accordian - Not Working</h1>
<hr>
<p>The source semantic UI component files are correct. And I am loading the latest version of jQuery. The Accordian renders, but it does not function. What am I doing wrong? I tried using the main semantic.js and semantic.css files - that encompasses all components, but this also did not work. </p>
<br>
<h3>Error Message in Safari Error Console</h3>
<p> I only see one error. It refers to the last line in the accordion.js or accordion.min.js file. It reads "can't find variable jQuery". and refers to a closing "}( jQuery, window, document);" statement. I got the same error when trying to load an earlier version of jQuery 2.1.3. What am I doing wrong? </p>
<head>
<script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
<link rel="stylesheet" href="https://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
</head>
<body>
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="content">
<p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
include
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
before
<script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)
Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)
I am trying to follow the instructions on this site: http://sathomas.me/acc-wizard/
I have followed the instructions, and even copied and pasted the exact code. Can you tell me what's going wrong? I have verified that all the code is located in the proper directory. Here is an image of what's displaying on my site: http://i.imgur.com/BSmrFZQ.png
Here's my code, the CSS is added in the header and is not in the code below:
<div id="body">
<div class="row-fluid breadcrumbs margin-bottom-30">
<div class="container">
<h1 class="pull-left">Book Now!</h1>
</div><!--/container-->
</div><!--/breadcrumbs-->
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid acc-wizard">
<div class="span3" style="padding-left: 2em;">
<p style="margin-bottom: 2em;">
Follow the steps below to add an accordion wizard to your web page.
</p>
<ol class="acc-wizard-sidebar">
<li class="acc-wizard-todo">Prerequisites</li>
<li class="acc-wizard-todo">Add Wizard</li>
<li class="acc-wizard-todo">Adjust HTML</li>
<li class="acc-wizard-todo">Release</li>
</ol>
</div>
<div class="span9">
<div class="accordion" id="accordion-demo">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
Install Bootstrap and jQuery
</a>
</div>
<div id="prerequisites" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-prerequisites">
<p>
The accordion wizard depends on two other open source packages:
<ul>
<li>The Bootstrap framework, available here.
<li>The jQuery javascript library, available here.
</ul>
Note that Bootstrap itself depends on jQuery for its interactive
components, so if you're using Bootstrap you probably already have
jQuery as well.
</p>
<p>
You'll include the CSS styles for Bootstrap in the
<code><head></code> of your HTML file, for example:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet"><!--
--></pre>
<p>
and you'll include jQuery and Bootstrap javascript files at the
end of your <code><body></code> section, for example:
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script><!--
--></pre>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#prerequisites -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
Add Accordion Wizard
</a>
</div>
<div id="addwizard" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-addwizard">
<p>
If you haven't already found it, the source code for the
accordion wizard is available on github
here.
There are two main folders, <code>/src</code> and
<code>/release</code>.
</p>
<p>
There are two different ways to add the accordion wizard to
your pages. The simplest approach is just to add the CSS and
javascript files from the <code>/release</code> folder
directly in your HTML without modifying them:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- --><link href="css/acc-wizard.min.css" rel="stylesheet"><!--
--></pre>
<p>
and
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script>
<!-- --><script src="js/acc-wizard.min.js"></script><!--
--></pre>
<p>
The release styles for the accordion wizard are based on
Bootstrap's default styles. If you've tweaked the Bootstrap
styles (e.g. by changing the link color), you'll want to
make corresponding tweaks to <code>acc-wizard.min.css</code>.
</p>
<p>
Alternatively, if you're building custom CSS and javascript,
then you might want to start with the files in the <code>/src</code>
folder and adapt them to your source code. The <code>/src</code>
folder contains a LESS file and uncompressed (and commented)
javascript. Note that the <code>acc-wizard.less</code> file
depends on variables defined in Bootstrap's <code>variables.less</code>
file.
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#addwizard -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
Adjust Your HTML Markup
</a>
</div>
<div id="adjusthtml" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-adjusthtml">
<p>
Now you can modify your HTML markup to activate the accordion
wizard. There are two parts to the markup—the collapsible
accordion itself and the task list. I prefer putting both in
the same <code>.row</code> with the task list taking up a
<code>.span3</code> and the accordion panels in a <code>.span9</code>,
but that's not a requirement.
</p>
<p>
The accordion panel can be exactly as documented in the
Bootstrap example,
but I think there's a problem with the Bootstrap implementation.
Specifically, the Bootstrap example only adds the class
<code>.in</code> to one of the accordion panels. That class
marks the panel as visible by default. The problem with only
having one panel visible by default is that users without
javascript will <strong>never</strong> be able to see the other
panels. Sure, that's a minority of users, but why make your
pages unworkable even for a small minority. Instead, I suggest
adding <code>.in</code> to all your <code>.collapse</code>
elements and have javascript code select only one to make
visible when it runs. The accordion wizard javascript will handle
that for you if you choose to use that approach.
</p>
<p>
The sidebar task list is nothing but a standard HTML ordered
list. The only required additions are adding the
<code>.acc-wizard-sidebar</code> class to the <code><ol></code>
element and <code>.acc-wizard-todo</code> to the individual list
items. If you want to indicate that some steps are already
complete, you can instead add the <code>.acc-wizard-completed</code>
class to the corresponding <code><li></code> elements.
</p>
<pre><!--
--><ol class="acc-wizard-sidebar">
<!-- --> <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
<!-- --></ol><!--
--></pre>
<p>
Finally, you'll want to active the wizard in your javascript.
That's nothing more than simply calling the plugin on an
appropriate selection.
</p>
<pre><!--
--><script>
<!-- --> $(window).load(function() {
<!-- --> $(".acc-wizard").accwizard();
<!-- --> });
<!-- --></script><!--
--></pre>
<p>
The default options are probably fine for most uses, but
there are many customizations you can use when you activate
the wizard. Check out the documentation on
github
for the details.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#adjusthtml -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
Test Your Page
</a>
</div>
<div id="viewpage" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="viewpage">
<p>
Naturally, the last thing you'll want to do is test your
page with the accordion wizard. Once you've confirmed that
it's working as expected, release it on the world. Your
users will definitely appreciate the feedback and guidance
it gives to multi-step and complex tasks on your web site.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#viewpage -->
</div> <!-- /.accordion-group -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/acc-wizard.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
function onNext(parent, panel) {
hash = "#" + panel.id;
$(".acc-wizard-sidebar",$(parent))
.children("li")
.children("a[href='" + hash + "']")
.parent("li")
.removeClass("acc-wizard-todo")
.addClass("acc-wizard-completed");
}
$(window).load(function() {
$(".acc-wizard").accwizard({onNext: onNext});
})
</script>
Are you not forgot about this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
Order is important! You add these libraries but in wrong order. Here is correct:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>
And fix that errors first!:
GET http://shield.sitelock.com/shield/maidsinmemphis.com 403 (Forbidden) index.php:363
GET http://www.maidsinmemphis.com/assets/elasticslides/css/style.css 404 (Not Found) index.php:25
GET http://www.maidsinmemphis.com/assets/css/acc-wizard.min.css 404 (Not Found) index.php:31
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.easing.1.3.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.eislideshow.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/js/acc-wizard.min.js 404 (Not Found) index.php:387
Uncaught TypeError: Object [object Object] has no method 'accwizard'