i have a page in web 'about TOEFL'. if i click about TOEFL, then the content/form was changing to content/form about TOEFL. when i click 'about TOEFL' the content was changing but when i click 'close', the form/content not changing. please help
this is my page code
<!-- Start Page 2 About -->
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Help your <span>TOEFL</span> Score<em> High</em></h3>
</div>
</div>
<!-- Start menu-form -->
<form id="menu-form">
<div class="grid_2">
<div class="box 60px"> <img src="images/img1.png" alt="">
<div class="text1">About TOEFL</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img2.png" alt="">
<div class="text1">Tips and Trick</div>
</div>
</div>
<div class="grid_2">
<div class="box 60px"> <img src="images/img8.png" alt="">
<div class="text1">Cambridge</div>
</div><br><br><br><br><br><br><br><br>
</div>
</form>
<!-- End menu-form -->
<!-- Start AboutTOEFL-form -->
<form id="AboutTOEFL-form" style="display:none" class="grid_14">
<div id="filters" class="sixteen columns">
<ul class="clearfix">
<li><a href="#page2" onclick="showAboutTOEFL()">
<h5>About TOEFL</h5>
</a></li>
<li><a href="#" >
<h5>Tips And Trick</h5>
</a></li>
<li><a href="#page2" onclick="showMenuForm()">
<h5>Close</h5>
</a></li>
</ul>
</div>
<div class="box 1000px">
<img src="images/toefl-1.jpg" alt=""><br><br>
--my text--
</div>
</form>
<!-- End AboutTOEFL-form -->
</div>
</div>
<!-- End Page 2 -->
this is my java script
<script type="text/javascript">
var showAboutTOEFL = function() {
document.getElementById("menu-form").setAttribute("style", "display:none");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:block");
}
</script>
<script type="text/javascript">
var showMenuform = function() {
document.getElementById("menu-form").setAttribute("style", "display:block");
document.getElementById("AboutTOEFL-form").setAttribute("style", "display:none");
}
</script>
The casing on your onclick event is wrong. You have onclick="showMenuForm()", but your function name is showMenuform (lowercase "f").
Related
I have a one page template that i am trying to modify so that on clicking particular links the user goes to a new page rather than scroll to a different section. I still want to keep the scroll to a section navigation but I have call to action buttons in those sections that need to go to different pages. The website is a wordpress site
Here is my js code:
$(document).ready(function() {
if ($("a" != ".external")){
$("a").on('click', function(event) {
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
});
}
});
So on this line if ($("a" != ".external")) I added a class called external to the <a> tags that need to leave the page. I also tried this.hash !== "/membership-form/" to try and target particular <a> tags but it only seems to work with my forms and image gallery that have # references.
How can I get the site to navigate away from the home page to my other pages?
Thanks
UPDATED JS CODE
AOS.init();
var $ = jQuery;
$(document).ready(function() {
$("a").on('click', function(event) {
if (!($(location).attr('href', '/BDWest/membership-form/'))){
if ((this.hash !== "/membership-form/") && (this.hash !== "#wood-grain") && (this.hash !== "#gifting") && (this.hash !== "#non-slip") && (this.hash !== "#wpcf7-f4-o1") && (this.hash !== "#carousel-control-next") && (this.hash !== "#carousel-control-prev") && (this.hash !== "#carouselExampleControls")) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 100
}, 800, function() {});
}
}
});
});
UPDATED WITH THE PHP CODE
HEADER.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title><?php bloginfo('name');?> | <?php wp_title(); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
<!-- Bootstrap core CSS -->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="loader">
<img alt="first image" src="<?php print IMAGES;?>/3.gif">
</div>
<div class ="parallax-full" id="soon">
<div class="banner-center">
<div class="sticky-top">
<img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/>
</div>
</div>
<div class="hero-textBG">
<div class="logo">
<h1>CLUB BD WEST</h1>
<h2>Logo can be here</h2>
<a class="external" href="/membership-form/"><button type="button" class="btn btn-default">Register Today</button></a>
</div>
<div data-aos="fade-up" data-aos-offset="0">
<div class="scroll-button">
<a href="#home">
<img class="img-fluid" alt="scroll-button" src="<?php print IMAGES;?>/button-down.png">
</a>
<h6>Scroll down</h6>
</div>
</div>
</div>
</div>
navigation.php
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#home"> <img src="https://via.placeholder.com/70x40?text=Very+Small+Logo" class="img-fluid"/> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section5">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
index.php
<!-- Header --><?php get_header(); ?><!--Menu -->
<?php get_template_part('navigation');?><!--Home Section -->
<div class ="parallax" id="BG-2">
<div class="container-fluid">
<div id="home">
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<h1 class="mt-1">CLUB BD WEST</h1>
<p class="lead">There are no winners or losers, ours is a philosophy of enjoyment through participation and we have organized a range of activities to suit all ages, fitness levels and activity choices.</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-100"> </div>
<section class="top-section">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/weights-icon.png"></img>
<h3>Badminton</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/staff-icon.png"></img>
<h3>Football</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Cricket</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Recreational Cycling</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/aerobics-icon.png"></img>
<h3>Kayaking</h3>
</div>
<div class="col text-center">
<img class="icon" src="<?php PRINT IMAGES;?>/spinning-icon.png"></img>
<h3>Nature rambling</h3>
</div>
</div>
<div class="row">
<div class="col text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Club+Sports" class="img-fluid"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<div class="content">
<div class="mt-2 col-md-12">
<div data-aos="fade-up">
<p class="lead">The list of activities is growing, fueled by suggestions from our members. It’s your club and responds to your needs..</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col text-center">
<h3>Our Goals</h3>
<p>To build an online social platform bringing together a diversity of people sharing a common purpose of interaction through sport and recreation.</p>
</div>
<div class="col text-center">
<h3>Our Mission</h3>
<p>To continue growth of both membership and activities developing a multicultural community with a social conscience. </p>
</div>
<div class="col text-center">
<h3>Our Vision</h3>
<p>To add to the quality of life, build cohesion in communities and enrich society.</p>
</div>
</div>
</div>
</section>
</div>
</div><!-- Container End -->
<hr class="content-seperator"></hr>
<div id="section2">
<div data-aos="fade-up">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h1>Our Story</h1>
<p>It all started when a group of friends got together for an impromptu game of badminton. The shared love of the game and the company of friends was a compelling mix and very quickly these random get togethers developed into a regular event.</p> <p>The group began to grow rapidly, first from within the circle of friends and later extending to others that were exposed to the group and drawn to it. At this point it was evident that a structure was required to communicate with group members and so BD West was formed.</p> <p>BD West is now a not for profit social club with over 200 members and plans to grow into a multicultural community of like-minded people brought together by the love of sport, recreation and the harmony of social connection. </p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Management Team</h2>
</div>
<div class="col-sm-12 text-center">
<img src="https://via.placeholder.com/500x60?text=Call+to+action+Management+Team" class="img-fluid"/>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator"></hr>
</div><!-- BG End -->
<div class ="parallax" id="BG-3"> <div class="col-sm text-center"> <img src="https://via.placeholder.com/468x60?text=Advert" class="img-fluid"/> </div>
<div id="section3">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-sm-0 text-center">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Events</h3>
<p class="lead">Here are some of our latest events</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
</div>
</div>
</div><!--./container -->
</div> <!-- ./section3 -->
<hr class="content-seperator"></hr>
</div><!--./ BG3 --> <!-- Pricing Table -->
<div class ="parallax" id="BG-1">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-3 mb-sm-0 text-center">
<div id="section4">
<div class="content">
<div data-aos="fade-up">
<h3 class="mt-2">Gallery</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="content-seperator-yellow"></hr>
</div> <!-- Contact Form and Location -->
<div class ="parallax" id="BG-2">
<div id="section5">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
<h3 class="mt-2">Contact Us</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<?php echo do_shortcode('[contact-form-7 id="16" title="Contact Us"]');?>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<p class="lead">BD West Incorporated</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div data-aos="fade-up">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer Section -->
<?php get_footer();?>
if you want to link through jQuery it would be like this:
$(location).attr('href', 'http://stackoverflow.com')
But it is highly recommended to do this with pure Javascript it best simulates an HTTP redirect, and it would go like this:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
It's better to use window.location.replace(...), because the replace() doesn't keep the page they'd come from in the session history, which avoids having the users stuck in a never-ending back-button loop.
I have a message page which shows your current messages. But the problem is that, it shows only one message, and that's the "newest" message. And the first messagebar which I click it, it won't show the HTML Code, even if it removes the "No mail Selected"
Here's how it sees if I press at second message tab: https://i.imgur.com/hMjftkm.png
My problem is that, the first messagetab it won't show it's HTML code. And when I change the message tabs (clicking new one) it won't actualise the new code. It shows the same code layout.
I found that error is in javascript, at the MAILCONTENT (1 or 2), but i have no clue how to fix it
JavaScript
<script>
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail2').addClass('hide');
$('.mailcontent').removeClass('hide');
});
});
</script>
HTML
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername1</h5>
<h5>Title1</h5>
</div>
<p>Hi. There's something wri..</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername2</h5>
<h5>Title2</h5>
</div>
<p>That's title2 that means yo...</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Sendername1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE1</h3>
<div class="email-body">
<p>Text1</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Title2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">MESSAGE2</h3>
<div class="email-body">
<p>That's message 2</p>
</div><!-- mailcontent -->
</div><!-- contentpanel --><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
</div><!-- emailcontent -->
</div>
</div>
CODEPEN
https://codepen.io/anon/pen/KxGjWp
First: may be you should redesign your code little bit.
But if you just want it working as it is, here is solution:
html:
<div class="mainpanel">
<div class="emailcontent">
<div class="email-options">
<label class="ckbox">
</label>
</div><!-- email-options -->
<div class="list-group">
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">Sendername</h5>
<h5>Title!</h5>
</div>
<p>This is messagebar1. Clicking it will show TITLE1.</p>
</div>
</div>
<div class="list-group-item unread">
<div class="list-left">
<label class="ckbox">
</label>
</div>
<div class="media2">
<div class="media-left">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</div>
<div class="media-body">
<span class="pull-right">1 hour ago</span>
<h5 class="media-heading">sendername2</h5>
<h5>Title2</h5>
</div>
<p>This is messagebar2. Clicking it will show TITLE2</p>
</div>
</div>
</div><!-- emailcontent -->
<div class="contentpanel emailpanel">
<h3 class="nomail">No mail selected</h3>
<div class="mailcontent hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">SENDER1</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE1</h3>
<div class="email-body">
<p>So this should be message1</p>
</div>
<br>
<hr>
</div><!-- mailcontent -->
<div class="mailcontent2 hide">
<div class="email-header">
<div class="pull-right">
2 hour ago
</div>
<div class="media2">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="../images/photos/user1.png" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">sendername2</h4>
to: me
</div>
</div><!-- media -->
</div><!-- email-header -->
<hr>
<h3 class="email-subject">TITLE 2</h3>
<div class="email-body">
<p>So there is message2 layout. But if I click messagebar1 it won't show it's content and delete this or vice-versa</p>
</div>
</div><!-- mailcontent -->
</div><!-- mainpanel -->
</div><!-- mainpanel -->
javascript:
$(document).ready(function() {
$('.emailcontent input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$(this).closest('.list-group-item').addClass('selected');
} else {
$(this).closest('.list-group-item').removeClass('selected');
}
});
// Clicking a message
$('.list-group-item > .media').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent').removeClass('hide');
$('.mailcontent2').addClass('hide');
});
$('.list-group-item > .media2').click(function() {
$('.list-group-item').each(function() {
$(this).removeClass('active');
});
$(this).parent().addClass('active').removeClass('unread');
$('.nomail').addClass('hide');
$('.mailcontent2').removeClass('hide');
$('.mailcontent').addClass('hide');
});
});
So problem was that even when you hiding mailcontent2, its wrapper div is still visible and mailcontent is visible but under that empty div. I moved both mailcontent under same container div. I would suggest to you on load create an array of object that contains messages and assign to each left panel menu item id that is same as array index of that message, then you can have only one mailcontent and just assign different text to it from array.
Also use dev console in browser (usually F12) there you can hover over element and see its dimensions and location, so it was visible that second mail container is over the first one. Also there you can disable, enable and edit css fast and run javascript commands, so you can compose suitable style and see right away how it will look.
I am creating a page that has 4 different sections. In each section there are 2 buttons that hide/show 2 different divs. Right now it only works on the top div and when you click the buttons in the other 3 divs, they open the top div. The content is being pulled from wordpress posts. Here is the javascript I am using.
$(document).ready(function() {
$('.expander').on('click', function() {
if ($('#TableData').is(":visible")) {
$('#TableData').hide();
} else {
$('#TableData').show();
}
$('#TableData2').hide();
return false;
});
$('.expander2').on('click', function() {
if ($('#TableData2').is(":visible")) {
$('#TableData2').hide();
} else {
$('#TableData2').show();
}
$('#TableData').hide();
return false;
});
});
Here is the html:
<div class="popup-open">
<div class="icons-large"></div>
<div class="icons-large"></div>
<div class="title">Title</div>
WHAT'S IN THE BAG</br>
PLAYER HISTORY
</div>
</div>
<div id="TableData">
<div class="slidingDiv">
<div id="tabs-1">
<div class="witb-tab">
<div class="row">
<a target="_blank" href="#">
<div class="image">
<img src="#" alt="">
<a target="_blank" class="product-name" href="" title=">">
</a>
</div>
</a>
</div>
</div>
CLOSE
</div>
</div>
</div>
<div id="TableData2">
<div class="slidingDiv2">
<div class="column left">
<!-- post thumbnail -->
<!-- /post thumbnail -->
<div class="player-biography">
</div>
</div>
<div class="column right">
<div id="tabs-2">
<div class="content-wrap"></div>
</div>
CLOSE
</div>
</div>
</div>
I just added a slider and carousel to my Volusion website homepage.
However, when I went to the page, the first carousel image would blow up to a huge size (original size is only 180 x 270) and flash twice. So I looked through the code and removed a line:
<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>
Because I thought maybe it's trying to load the javascript twice or something.
After I did this, the carousel image still blows up to a huge size on load, but only once.
Here is the page where it is happening on: http://www.wallsrepublic.com
All of the relevant code I have on my home page is below:
<script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>
For the main slider:
<link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});
$(window).load(function() {
$(".flexslider").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>
For the problematic carousel:
<script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
<script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>
<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
<div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
<div class="amazingcarousel-list-container">
<ul class="amazingcarousel-list">
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK " ><img src="http://wallsrepublic.com/v/carousel/1.png" alt="GOLD DAMASK " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD DAMASK </div>
<div class="amazingcarousel-description">$159 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY " ><img src="http://wallsrepublic.com/v/carousel/2.png" alt="GREY OVERLAY " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GREY OVERLAY </div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png" alt="BLACK & WHITE DOGSTOOTH " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH </div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png" alt="BROWN FAWN " /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BROWN FAWN </div>
<div class="amazingcarousel-description">$139 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png" alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">SERENITY SAND</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png" alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLOCK-STONE GREY</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png" alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
<div class="amazingcarousel-description">$79 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png" alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">TIA GOLD</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png" alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
<div class="amazingcarousel-description">$399 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png" alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
<div class="amazingcarousel-description">$89 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png" alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
<div class="amazingcarousel-description">$119 USD</div>
</div> </div>
</li>
<li class="amazingcarousel-item">
<div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png" alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
<div class="amazingcarousel-title">GOLD VICTORIAN</div>
<div class="amazingcarousel-description">$149 USD</div>
</div> </div>
</li>
</ul>
<div class="amazingcarousel-prev"></div>
<div class="amazingcarousel-next"></div>
</div>
<div class="amazingcarousel-nav"></div>
</div>
</div>
I had the javascript and css files in my template header before, but then the slideshows did not work so I had to move them to be directly on the home page.
Any help would be appreciated.
$(window).load(function() {
$(".flexslider").flexslider();
});
Try to remove those lines, you are calling the slider 2 times for the same class.
I don't think it's an issue with Flexslider that's causing this.
As far as I can tell, it is caused by the wallpaper swatch displaying at 100% width before the amazing carousel plugin kicks in and wraps the image to a smaller width.
Try adding this to your stylesheet
.amazingcarousel-item {
float: left;
width: 150px;
}
This will give the carousel item a width by default, which in turn causes the image inside it to be a smaller width.
I am trying to code something like this one on http://teamgeek.co.za/#who
I already had the code on the gif and div that will show the description on the bottom of each picture selected. The problem is that if I clicked on the second row, the opened description on the first row won't automatically close itself.
Here is my script that I used.
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
<script>
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
});
</script>
This is the full code that I used, and I am using the javascript above to get the functions:
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages">
<div id="1" class="mydivhide">
<h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
</div>
<div id="2" class="mydivhide">
<h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
</div>
<div id="3" class="mydivhide">
<h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
</div>
<div id="4" class="mydivhide">
<h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items2">
<div class="item">
<a id="5" class="work page-scroll">
<img class="media" src="img/tryimages/rd.png"/>
<div class="content">
<img class="media" src="img/tryimages/rd.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="6" class="work page-scroll">
<img class="media" src="img/tryimages/soc.png"/>
<div class="content">
<img class="media" src="img/tryimages/soc.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="7" class="work page-scroll">
<img class="media" src="img/tryimages/anj.png"/>
<div class="content">
<img class="media" src="img/tryimages/anj.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="8" class="work page-scroll">
<img class="media" src="img/tryimages/ian.png"/>
<div class="content">
<img class="media" src="img/tryimages/ian.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
<div id="pages2">
<div id="5" class="mydivhide">
<h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
</div>
<div id="6" class="mydivhide">
<h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
</div>
<div id="7" class="mydivhide">
<h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
</div>
<div id="8" class="mydivhide">
<h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
</div>
</div>
</div>
</section>
If you want to go with this code you should maybe use this:
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
</script>
I'm not sure if I understand the snippet correctly since I don't know the rest of your code :-)
However, this isn't a good way to solve your issue. As in the comments already mentioned, it's a lot better to handle it with classes.
Here is a jsfiddle which can easily solve your problem:
JSFiddle
However you might only change the effect, but this is a minor thing.
Below code optimization of toggle for your issue
you have set class as .row-data for each row and the and write below script..
<script>
$(".row-data a").click(function() {
$(".row-data").hide("slow");
$(this).parent().show("slow");
});
</script>
Note: remove your Script...