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
Related
I have found many examples for different circumstances, but im just not experienced enough to combine them and accomplish the result I want. I am trying to create a TamperMonkey/GreaseMonkey script to highlight a DIV that matches a particular image source.
The website code is as follows, I cannot change it, but I removed the URL for the image and excess code so its easier to read:
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Im looking for code to search for image-source-#, and change the background color of the listing-row DIV when I find it (for example, search for image-source-2.jpg and change listing_row to green).
$('img[src="image-source-2.jpg"]').parent().css('background-color','red');
div{
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});
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>
Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox