I am relatively new to Javascript and jquery so please forgive if this may be silly.
I am making a html content(Document) reader which would run in a browser.
<div id="documentContainer">
<div class="dcIconsListTop" id="annotationIconsDiv"></div>
<div id="documentContainerScroll" style="padding:0px;width:100%;overflow:auto;margin:0px;"></div>
</div>
and inserting the actual content in the div.load
this.iframe = jQuery('<div id = "documentframe" width="744px" scrolling="no" height="100%" frameborder="0" allowtransparency="yes" src="about:blank"></div>');
jQuery("#iframeContainerScroll").append(this.iframe);
jQuery('#documentframe').load(contentURL, function() {
jQuery(this).trigger("create");
//obj.iFrameOnLoad();
});
The problem is the actual document is not getting rendered properly.Basic inline styling is shown in the browser but some html tags are not apearing as expected in the browser(Although the tags are getting passed to the browser correctly)
The html content:::
<p><strong>This is bold</strong></p>
<p><strong> </strong></p>
<p><em>this is italic</em><strong> <br></strong></p>
<p><strong> </strong></p>
<p><span style="text-decoration: underline;">This is und<strong><br></strong></span></p>
<p><span style="text-decoration: underline;"> </span></p>
<p><span style="text-decoration: underline;"> </span></p>
<p>Detailed session recording serves a wide variety of purposes:</p>
<div class="blockquote">
<blockquote class="blockquote">
<p>It trains students to recall the details of their interactions with clients-the verbal and nonverbal content that makes up the interaction.</p>
</blockquote>
</div>
<div class="blockquote">
<blockquote class="blockquote">
<p>It trains students to be aware of emotional undertones of the interaction, which will provide clues to the motivational state experienced by the client, and to transference phenomena.</p>
</blockquote>
</div>
<div class="blockquote">
<blockquote class="blockquote">
<p>It encourages students to develop insight into their own emotional reactions to clients and counseling situations (countertransference) so that they will not act out on their feelings without awareness.</p>
</blockquote>
</div>
<div class="blockquote">
<blockquote class="blockquote">
<p>It provides a framework to track the helping process, identify what skills were or were not applied, and clarify the purposes and efficacy of their interventions.</p>
</blockquote>
</div>
<div class="blockquote">
<blockquote class="blockquote">
<p>It develops the ability to communicate insights, thoughts, and feelings in written form.</p>
</blockquote>
</div>
<div class="blockquote">
<blockquote class="blockquote">
<p>It provides a framework for the instructor and student to collaboratively evaluate the training process individually, as the basis for class discussion, in students' casework, or in practicum classes. Students may also refer to recorded material in their theoretical papers, linking it to their practice.</p>
</blockquote>
</div>
<h2 style="clear: both;" class="title"><a target="_blank" name="ID0EKB"></a></h2>
<p><span style="text-decoration: underline;"> </span></p>
PLEASE PLEASE help!
Also if anyone could suggest me a different way to do this i would really appreciate..
Background:
1)I started with building an iframe for the actual content because i dint want the content scripts and the player(Buttons around the content) scripts to mix.But that was a not good practice because i could not control the inner content html so as to increase/decrease font etc...
2)So i am searching for a different way to do this.Can anyone suggest?
Related
I'm developing a website using HTML, CSS and Boostrap. I cant figure out why everything isn't even in width going across the page. What am I missing? It seems to be some sort of Margin or Padding on the right side of the page and my card sections are uneven.
https://codepen.io/kennethpaige/pen/zYGzgOj
#<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<!--STYLE-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--style-->
</head>
<body>
<!--TITLE-->
<section id="title">
<div class="container-fluid">
<nav class="navbar fixed-top navbar-light bg-light">
<a class="nav-brand" href="https://www.gimkit.com/"><img id="brand" class="gimkit-logo" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul id="navbar-list" class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#application-questions">Application Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#customer-questions">Customer Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fun-facts-about-me">Fun Facts About Me</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 id="kenneth-paige" class="display-4">Kenneth Paige</h1>
<img class="gimkit-logo2" src="https://i.postimg.cc/SNRNWbVz/gimkit-removebg-preview.png">
</div>
</div>
<!--TITLE-->
<!--APPLICATION QUESTIONS-->
<section id="application-questions">
<div>
<h2>Application Questions</h2>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="falese">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div id="carouselExampleControls" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" id="carousel">
<h3>Why you want to work in customer support?</h3>
<p style="text-align:left">Why do I want to work in customer support? Well, I believe that we were put on this earth to help each other. I gained a good understanding of this at the age of 11 when my mother had a stroke that completely paralyzed the left side of her body. A week later she woke up to the news that her mother passed away at her bedside.</br></br>
Seeing as how my father was never around, and I was the oldest of three, I learned responsibility at a young age. My mother taught me how to cook, clean, and wash clothes from a wheelchair, she made sure that I took care of my little brothers, and after everything she went through, she still managed to keep a smile on her face and never let us see her cry. She always told me that I was the reason for her happiness. However, after watching my mother go through so much and still find hope, I realized she was the reason for my happiness. She always thanked me for helping her during that time and It took years for me to realize that she was the one who helped me and for that, I thank her till this day.</br></br>
When I hear “Customer Support”, the only thing that comes to mind is “helping someone in need”. I’ve de-escalated irate customer’s before and at the end of the call, they always thank me for helping them. The goal is to empathize and understand what they’re going through. You must heal the customer before you can resolve their issue. I want to work in customer support because I love to help others. Nothing feel’s better than hearing that I was able to take someone’s terrible day and turn it into a wonderful day with a delightful experience.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A description of a great customer service/support experience</br> you had recently, and what made it great.</h3>
<p style="text-align:left">I was driving home the night of November 16th, 2019. It was dark and raining outside, so unfortunately, I couldn’t see very well. As I was driving, I heard a loud POP, at the same time I felt my car rumble and start slowing down. After my car came to a complete stop, I got out to check and see what was going on. To my surprise, I ran over a pothole that flattened both tires on the right side of my vehicle. I had no idea what I was going to do.</br></br>
The next day I called State Farm and spoke with a representative who worked with me to set up a claim. He asked me everything that happened, and I explained it to him in detail. He ensured me that I had nothing to worry about, everything would be taken care of, and all I had to do was pay a deductible of 500.00. I chose to get my car repaired at the same place I purchased it from, a Toyota dealership about 5 minutes away from my house. The next day I called Toyota to see if the repairs were done. I was informed by a technician that my vehicle was ready for pick up however, it had to be taken to another department for the repairs. A few minutes later I received an invoice from Toyota for 2,168.68. I immediately contacted Toyota and let them know that my repair was supposed to be covered as an insurance claim. The person I spoke with told me they didn’t receive an insurance claim, so I would need to pay 2,168.68 or I wouldn’t be able to pick up my vehicle. Not only was it more than I expected, but I also didn’t have anywhere near that amount of money. I called State Farm again, this time I spoke with a different representative. After I explained the situation, the representative told me the person before her set up an insurance claim for my car, but they didn’t cover pothole damage. I was in a dilemma to no fault of my own, that neither company wanted to take responsibility for.</br></br>
After several calls to Toyota and State Farm, I was transferred to the manager of the repair department at Toyota. He let me know he understood what I was going through by relating it to a similar experience he went through, apologized for the misunderstanding, and told me he was going to personally make sure my issue got resolved. He didn’t try to place blame on anyone else and I could tell by the empathy in his voice he wanted to help me. He offered to take care of the repair amount and wash my car free of charge. By the end of the call, I had almost forgot about the experience I went through. Getting your issue resolved is always a plus. However, after the experience I had with the Manager at Toyota, I continue to go to them as a customer. He could’ve just offered to cover the repair amount and ended the conversation, but after everything that I went through, I don’t think I would’ve ever gone back to them. Sometimes being a genuine human being is the greatest gift anyone could ever receive.
</p>
</div>
<div class="carousel-item" id="carousel">
<h3>A time you taught yourself a new skill to complete a job or project.</h3>
<p style="text-align:left">I worked at a corporate Verizon Wireless call center for years. I loved my job. However, my daughter was born in October of 2018, and I wasn’t making enough money to support my family. I had to find a way to generate more income.</br></br>
One day I was scrolling on social media and I saw an ad that stated I could learn how to code, and I wouldn’t have to pay anything until I got a job as a software developer. I clicked on the link and after completing an application I was asked to complete some pre-course work. I completed the coursework and even after I was done, I wanted to know more. So, I studied as much as I could with hopes of getting approved for a coding bootcamp. A week later I received an email stating I didn’t get approved for a loan because I didn’t have enough credit. Seeing as how I could barely take care of my family, I already knew I couldn’t afford to pay for school. So, I investigated every possible option until I decided to take the self-taught route. I wasn’t going to let anything stop me from getting where I needed to be in life. After doing some research, I stumbled upon a website called “Free Code Camp” that not only allowed me to study code but also gives you certifications upon completion. I completed course work and several projects until I earned a responsive web design certification by myself.</br></br>
When I heard I wasn’t approved for a loan due to financial reasons, I almost gave up. However, I never let it get to me. All it took was some consistency and determination. Studying code is an endless journey and I’m still learning till this day.
</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!--APPLICATION QUESTIONS-->
<!--CUSTOMER QUESTIONS-->
<section id="customer-questions">
<h2>Customer Questions</h2>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>How do you create a Class?</h3>
</div>
<div class="card-body">
<p>Hi Mr. Customer,</br></br>
I hope all is well. In order to create a class in GimKit, you will first need to sign into your GimKit account. From your dashboard click <strong>classes</strong> on the left panel and then click <strong>new class</strong>. On this page you will be asked to enter a <strong>class name</strong>, <strong>class color</strong>, and <strong>class members</strong>. Once that is completed, we will want to submit the information by clicking <strong>create class</strong>. Your new class will be created and ready for you to create memorable learning experiences. I have listed some resources below regarding “classes” in GimKit. Feel free to reach out to me if you have any additional questions.</br></br>
Classes Explained</br>
How To Create A Class</br>
How/When To Use Classes</br>
How To Edit Classes</br></br>
Thank you,</br>
Kenneth
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Why does Gimkit cost money?</h3>
</div>
<div class="card-body">
<p style="padding-left:20px;">Hi Mrs. Customer,</br></br>
I hope your having a wonderful day. All our GimKit plans are ad free, so we offer several plan options in order to maintain an amazing learning experience. I listed a link below to our pricing plans, including an option to use GimKit for free forever. Please feel free to reply to this email if you have any additional questions about GimKit.</br></br>
Get Started with Gimkit!</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div style="text-align:center" class="card-header">
<h3>Does Gimkit have the ability to export a report to a CSV file?</h3>
</div>
<div class="card-body">
<p style="padding-left:35px;">Hi Ms. Customer,</br></br>
I hope all is well. GimKit reports can be exported into a PDF file, however, currently the option to export into a CSV file is unavailable. I have included some resources below regarding GimKit reports and information on printing and saving reports. I apologize for any inconvenience. Please feel free to reach out to me if you have any additional questions.</br></br>
Game reports</br>
Printing and Saving Reports</br></br>
Thank you,</br>
Kenneth</p>
</div>
</div>
</section>
<!--CUSTOMER QUESTIONS-->
<!--FUN FACTS ABOUT ME-->
<section id="fun-facts-about-me">
<h2>Fun Facts About Me</h2>
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Things I Love To Do</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Listen to Music</li>
<li>Watch Anime</li>
<li>CODE</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Fun Places I've Been To</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>Las Vegas, NV</li>
<li>Sacramento, CA</li>
<li>Orlanda, FL</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" id="pricing-column">
<div class="card">
<div class="card-header">
<h3 style="text-align:center">Hidden Talents</h3>
</div>
<div class="card-body">
<ol style="text-align: center; font-size: 20px;">
<li>I'm an Audio Engineer</li>
<li>I can play multiple Instuments</li>
<li>I'm a songwriter</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
<!--FUN FACTS ABOUT ME-->
</div>
</div>
</body>
</html>
Add .row margin:0px !important; to overwrite .row margin.
you should use "container-fluid" if full width
you should use "container" if specified width used
this will fix your column view of cards
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/
hello guys good morning
i want to semantic one of my recent project but i'm not sure about one of my code i've just created
also i have picture of that section
i want to use tag for highlighted part in picture (please see the picture)
is it valid to use section tag here?
my code for this part :
<section class="customer-receipts">
<div class="image-part">
<figure>
<img src="h56.jpg">
</figure>
</div>
<div class="text-part">
<h2>send customers digital receipts</h2>
<section class="paper-sec">
<h3>no paper receipts</h3>
<p>Eliminate the need to store signed paper receipts</p>
</section>
<section class="paper-sec">
<h3>searchable transactions</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</section>
<section class="paper-sec">
<h3>bra free</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</section>
<section class="paper-sec">
<h3>green technology</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</section>
</div>
</section>
Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
Use <article> for main wrapper.
Source
You better use the construction like this -
<article class="customer-receipts">
<section class="image-part">
<figure>
<img src="h56.jpg">
</figure>
</section>
<section class="text-part">
<h2>send customers digital receipts</h2>
<div class="paper-sec">
<h3>no paper receipts</h3>
<p>Eliminate the need to store signed paper receipts</p>
</div>
<div class="paper-sec">
<h3>searchable transactions</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</div>
<div class="paper-sec">
<h3>bra free</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</div>
<div class="paper-sec">
<h3>green technology</h3>
<p>Every transaction you run in saved in the system for the lifetime of your business</p>
</div>
</section>
</article>
Read this Section tag
Section can be used if you want to display the details of a particular part of a web page. You can describe title, images or other details you want so that it would be easy to maintain your code.
For example, a home page of a website can be divided into 3 sections e.g., Intro, Apps, Upcoming apps.
I am trying to implement a carousel using impress.js similar to http://demo.tutorialzine.com/2012/02/css3-product-showcase/#/music.
I tried developing it but facing some problem like when clicked on left or right icon, the screen is moving upwards and downwards. The work that i have done is uploaded in my server. Link:
http://think360apps.co.in/evdt/issued/index.html#intro
Also the code is given below:
<div class="animate-slider">
<div id="impress" class="impress-not-supported">
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br /> 1.2 GHz Dual Core CPU<br /> 32 GB of storage<br /> Fast Camera</p>
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel to Android. Simple layouts with subtle animations and delightful flourishes make everything feel alive. </p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing with mobile devices just as easy at it is in person. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes it much easier to share them with family and friends.</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and fun. Store your entire collection for free, and stream your music to your Galaxy Nexus, computer, or other Android devices.</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
Please let me know where i am doing wrong.Please help.
You should have this code to control the button:
<script>
$("#arrowRight").click(function () {
impress().next();
});
$("#arrowLeft").click(function () {
impress().prev();
});
</script>
By the way, the link you've given is invalid.
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>