Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work.
I try to solve it for hour, but I don't understand the problem. You can find the site here.
And you can find the JSFiddle here.
Here there are the part html:
<div class="section" id="section5">
<div class="slide" id="slide1">
<div class="intro">
<h1>#your Led Solution 1 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
<img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>#your Led Solution 2 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit & LED indicator lamps with integrated pulse</p>
<img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
.fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.
Related
I am getting something weird issue with my website. I have add some links to my website home page to another page. Something like this
www.fsfsdafsdafdsafsadf/#pro1
www.fsfsdafsdafdsafsadf/#pro2
www.fsfsdafsdafdsafsadf/#pro3
www.fsfsdafsdafdsafsadf/#pro4
Now when I click on any link it will send me to div pro1 on any of the link I click.. Please check the html also for that page
<!-- section 1 image-->
<div id="pro2" name="pro2">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Unlimited possibilities </div>
Some text
</div>
<div class="inner-right">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/06/product1.jpg" alt="product image1">
</div>
</div>
</div>
<!-- section 1 no image-->
<div id="pro1" name="pro1">
<div class="inner-image-width">
<div ><div class="titleinner">Boost in revenue </div>
Some text
<!-- section 2 image-->
<div id="p5">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Improved customer experience </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product4.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 2 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Confidence in security </div>
Some text</div>
</div>
<!-- section 3 image-->
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product3.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Happier staff </div>
Some text</div>
</div>
<!-- section 3 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Optimized marketing campaigns </div>
Some text
</div>
</div>
<!-- section 4 image-->
<div id="pro3" name="pro3" onlclick="window.location.hash = '#pro3'";>
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Secure payments </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product6.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 4 no image-->
<div id="pro4" name="pro4">
<div class="inner-image-width">
<div><div class="titleinner">Fun entertainment </div>
Some text</div>
</div>
</div>
<!-- section 5 image-->
<div id="pro6" name="pro6">
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product5.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Reduced operating costs </div>
Some text</div>
</div>
</div>
<!-- section 5 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Immediate improvements </div>
Some text</div>
</div>
<!-- section 6 image-->
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Increased brand loyalty </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product2.jpg" alt="product image1"></div>
</div>
<!-- section 6 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Minimal risk </div>
Some text</div>
</div>
<div style="font-size:24px;">Contact us Some text</div>
I try every solution of stackoverflow but nothing work. Can anybody please help me this
You just use this:
Pro 1
Because you are using bookmarks(#hushtag) in your URL.
Check out HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of
a Web page.
Bookmarks are practical if your website has long pages.
To make a bookmark, you must first create the bookmark, and then add a
link to it.
When the link is clicked, the page will scroll to the location with
the bookmark.
In your case,
www.fsfsdafsdafdsafsadf/#pro1 -> click this link will jump to div #pro1
www.fsfsdafsdafdsafsadf/#pro2 -> click this link will jump to div #pro2
www.fsfsdafsdafdsafsadf/#pro3 -> click this link will jump to div #pro3
www.fsfsdafsdafdsafsadf/#pro4 -> click this link will jump to div #pro4
Basically, your URL bookmarks(#hushtag) works fine.
If you want to link to another page, just avoid using hashtag, maybe like this:
www.fsfsdafsdafdsafsadf/pro1.php -> click this will link to 'pro1.php'
like this:
link text
link text
i need to develop a slider / carousel like this exactly you can see the example in the site
i pasted the code and tried to study it but i got lost with scripts and the divs background not loaded!
simply i need to sliding three or more divs with custom pagination float on and every div is stretched to the browser page with background image cover like the example i mentioned before. Thank you
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="section row-slide"><div class="item--mobile wrap-item isActive inView" data-fx="slide" data-ancor-target="dynamism" >
<div class="slider-item__wrap" data-item-count="" >
<div class="slide current" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dynamism_modelapge-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dynamism_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg" style=" background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dynamism_modelapge-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
DYNAMISM
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>CREATED TO MASTER THE ROAD</p>
</div>
<div class="content__descr">
<p>Each element of the New Alfa Giulietta has been designed to perfectly balance power and agility for every road condition, achieving extraordinary driving pleasure. </p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide" >
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" data-src-medium="/content/dam/alfaromeo/global/model/giulietta/tablet/dna_modelpage-newgiulietta_medium.jpg" data-src-small="/content/dam/alfaromeo/global/model/giulietta/mobile/dna_modelpage-newgiulietta_small.jpg" data-src="/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg" style="height: 544px; background-image: url("/content/dam/alfaromeo/global/model/giulietta/desktop/dna_modelpage-newgiulietta.jpg");">
<div class="model-item__row">
<div class="color--light model__content left">
<h2 class="content__title">
Alfa D.N.A.
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>DYNAMIC CONTROL</p>
</div>
<div class="content__descr">
<p>The Alfa D.N.A. system is the exclusive Alfa Romeo driving mode selector which adapts the vehicle’s performance to suit the driver’s style and road conditions. There are three modes: Dynamic, for performance, Natural for optimum fuel economy and All-Weather for tackling bad weather and low grip conditions.</p>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="slide">
<article class="model-item">
<div class="model-item__col pos-bottom-left js-responsive-image" style="background-image:url(images/models/giulietta/dynamism_modelapge-newgiulietta.jpg);">
<div class="model-item__row">
<div class=" model__content pos--right">
<h2 class="content__title">
SUSPENSION
</h2>
<div class="content__text">
<span class="animated-line"></span>
<p>FEEL THE ROAD</p>
</div>
<div class="content__descr">
<p>Sporty, fun, yet comfortable: the New Alfa Giulietta is equipped to deliver the authentic Alfa Romeo driving experience. The Macpherson front suspension and Multilink rear suspension have been designed to offer great road holding and a superior level of comfort. This combination offers a truly involving drive with no loss in refinement.</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
<!-- END contenitore elemento con scroll orizzontale -->
<!-- START Menu per scroll orrizzontale -->
<div class="slider-menu">
<ul class="slider-menu__items">
<li class="active" data-adobe="content::dynamism">
DYNAMISM
</li>
<li data-adobe="content::alfadna">
Alfa D.N.A.
</li>
<li data-adobe="content::suspension">
SUSPENSION
</li>
</ul>
</div>
<!-- END Menu per scroll orrizzontale -->
<!-- START pulsanti di avanzamento alla slide successiva nel data target deve esser contenuto il data-ancor-target della slide successiva -->
<div class="mobile-next-navigation" data-target="efficiency">EFFICIENCY</div>
<!-- END pulsanti di avanzamento alla slide successiva -->
</div>
</div>
please check this link : https://jsfiddle.net/IA7medd/osdLso66/
HTML :
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
<div class="item" style='background-image:url("https://pixabay.com/static/uploads/photo/2016/01/14/01/41/image-view-1139204_960_720.jpg")'></div>
</div>
</div>
</div>
</div>
</div>
The style of each item in the slider which you can change its height :
.item{
height:350px;
background-position: center center;
background-size: cover;
}
This is the necessary plugins for the slider :
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css
https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css
and finally the slider script :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
});
});
Developing site and when I use fullPage js I can only see the first page..The links are in a proper head on dev site. I currently have to disable fullpage to get any work done on the site. I would like to have the feature at end of development but may have to just have a normal scroll...
<script src="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css">
<body id='fullpage'>
<div class='section'>
<nav>
<div id="logo"></div>
<div id='menu'>
<p>Home</p>
<p>Resources</p>
<p>About</p>
<p>Contact</p>
<p>Books</p>
<p>Blog</p>
</div>
<div id='social'>
<img src="img/facebookIcon.png">
<img src="img/twitterIcon.png">
<img id='share' src="img/shareIcon.png">
</div>
</nav>
<div id='bookPromotion'>
<div id='bookStack'></div>
<div id='bookStackText'>
<h2>College is expensive.<br> Your books don't have to be.</h2>
<h1>Get 7 books for the price of 2</h1>
<div>
<p>28 SAT Math Lessons - Beginner</p>
<p>28 SAT Math Lessons - Intermediate</p>
<p>28 SAT Math Lessons - Advanced</p>
<p>320 SAT Math Problems</p>
<p>32 Most Effective Math Strategies</p>
<p>SAT Math Study Guide Companion</p>
<p>New Math Problems - Revised SAT</p>
</div>
<button>Get my books now</button>
</div>
</div>
<div id="bookSlider">
<div id="sliderCatBtn">
<p id='SAT'>SAT</p>
<p id='ACT'>ACT</p>
<p id='AP'>AP</p>
<p id='Other'>Other</p>
</div>
<div id="sliderNextBtn"></div>
</div>
</div>
<div class='section'>
<div id='newsletterTexts'></div>
<p id='newsletterHeadline'>GET 800 Newsletter</p>
<form id='newsletterBanner'>
<div class='left'>
<p>Tips and strategies delivered right to your email</p>
<input type='email' placeholder='Type Email Here'>
</div>
<div class='right'>
<div></div>
<input type='submit' value='Join'>
</div>
</form>
</div>
<div id='resources' class='section'>
<h1>Learning made easy with these free resources</h1>
<div class="colWrap">
<div id='lImg'></div>
<div id='centerCol'>
<div class="resource">
<img src="img/iconDiploma.jpg">
<h3>SAT Math Prep Course</h3>
<h4>This 12 part SAT math prep course has in-depth solutions to all math questions from Test 1 of the Official SAT Study Guide</h4>
</div>
<div class="resource">
<img src="img/iconVideo.jpg">
<h3>Videos</h3>
<h4>Our videos show you how to do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconArticle.jpg">
<h3>Articles</h3>
<h4>Our articles are written to help you do your best on your next test</h4>
</div>
<div class="resource">
<img src="img/iconForum.jpg">
<h3>Forum</h3>
<h4>Come join in on the discussion. Ask your SAT, ACT, or SAT Subject Test questions now</h4>
</div>
</div>
<div id='rImg'></div>
</div>
</div>
<div class='section'>
<p id='aboutHeadline'>About Get 800 and Dr. Steve Warner</p>
<div id="aboutCol">
<img src="img/steve.jpg">
</div>
<div id='aboutBtn'></div>
</div>
<div class='section'>
<div id='contactBg'>
<form type=POST>
<input type='text' placeholder='Message Here'>
<input type'text' placeholder='Your Name Here'>
<input type'email' placeholder='Your Email Here'>
</form>
</div>
<footer>Copywright 2-15 Get 800 All Rights Reserved</footer>
</div>
</body>
Fullpage.js can not have the body as the wrapper.
Change:
<body id='fullpage'>
YOUR SECTIONS HERE
</body>
For
<body>
<div id='fullpage'>
YOUR SECTIONS HERE
</div>
</body>
You can find it in the documentation:
Sections should be placed inside a wrapper ( in this case). The wrapper can not be the body element.
I'm working on this code example of collapsible text.
jsfiddle Link
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(document)
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
There is a issue with the code when i expand the first row. When I click on one row arrow animation is activated also on all rows. How I can prevent this?
Because you use this:
$('.arrow').toggleClass('down');
This will toggle the class for all elements with arrow class
You want to limit it to the question being clicked on
$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');
Updated Fiddle
Good day good people, I very much appreciate the depths of knowledge on this site.
Long story:
I have made a couple of very basic websites with html and css but this is my first attempt at a more interactive website with Javascript. The URL is www.audiophilesengineering.com and it has a few glitches that I cannot pinpoint in my code. Specifically, the entire "Contact" page loads the content twice. This seems like the most consistent error so I would like to tackle that first. I am currently a young broke entrepreneur, so I am forced to do most everything myself for my businesses, for now. At the same time I am dissatisfied with my previous boring website and want to make something much more interactive, but some serious glitches have developed.
tldr (short story);
Why does the content of http://audiophilesengineering.com/#!Contact.html display twice?
contact page html code:
<div class="genericSection section-CONTACT">
<!--add here url for this section background image-->
<img class="sectionBackgroundImage" src="pages/backgrounds/background_contact.jpg" />
<!--/section background image-->
<!--add here page number-->
<p class="pageNum textColor01">04/<span class="textColor03">07</span></p>
<!--/add here page number-->
<!--skeleton container-->
<div class="container">
<!--Website logo-->
<div class="row">
<div class="sixteen columns">
<img class="brand" src="images/logo.png" alt="logo" />
</div>
</div>
<!--/Website logo-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">1</div>
<h2 class="textColor01">Contact Us<span class="textColor02"> // Phone or Email</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<div class="addressContainer">
<p><a class="phoneBig textColor01" href="tel:+8134801321">813-480-1321</a></p>
<p>audiophilesengineering#gmail.com</p>
<p class="defaultText textColor01">Audiophiles Engineering<br />Tampa, Florida 33624<br />United States</p>
</div>
</div>
</div>
<!--/Section title H2-->
<!--vertical spacer-->
<div class="verticalSpacerMedium"></div>
<!--/vertical spacer-->
<!--Section title H2-->
<div class="row">
<div class="sixteen columns">
<div class="h2square backgroundColor02">2</div>
<h2 class="textColor01">Visit Us<span class="textColor02"> // By Appointment Only</span></h2>
<div class="horizontalLine backgroundColor02"></div>
<div class="clear-fx"></div>
<!--full width map-->
<div class="mapContainer">
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=28.04,-82.51&sll=28.040078,-82.510190&hl=en&ie=UTF8&t=p&ll=28.033198,-82.507324&spn=1.939406,8.789063&z=6&output=embed"></iframe>
</div>
</div>
</div>
<!--/Section title H2-->
</div>
<!--/skeleton container-->
</div>