Develop Reference

active class menu item on javascript or php

I've menu items code....and I want if I click on menu a it will displaying a page, if I click on menu b it will displaying page b with out page a....
Can anyone show me how to solve this with javascript or php, I'm newbie.... please help..
This is my HTML code
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p>page b</p>
</div>
</div>

First you need to hide page b,give id's to your div to show/hide via javascript:
<div class="col-xs-9">
<ul class="menu-items">
<li id="showA" class="active"></li>
<li id="showB">b</li>
</ul>
<div id="pageA" style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">
page a
</p>
</div>
<div id="PageB" class="attr1" style="width:100%;border-top:1px solid silver;display:none">
<p>page b</p>
</div>
</div>
Javascript code to show particular page:
<script>
$(document).ready(function() {
$("#showA").click(function() {
$("#pageB).hide();
$("#pageA").show();
});
$("#showB").click(function() {
$("#pageA).hide();
$("#pageB").show();
});
</script>
To set your menu active use following code:
$(".menu-items li").click(function() {
$(".menu-items li").removeClass("active);
$(this).addClass("active");
});

you mean you want to open a new page when you click on list item, so just do this window.open(pass your page url here)
<div class="col-xs-9">
<ul class="menu-items">
<li class="active"></li>
<li>b</li>
</ul>
<div style="width:100%;border-top:1px solid silver">
<p style="padding:15px;">page a</p>
</div>
<div class="attr1" style="width:100%;border-top:1px solid silver">
<p onclick="function(){window.open(pageUrl)}">page b</p>
</div>
</div>

trying to have a jQuery, javascript, click function which changes an image to the related id

I have a vertically divided page, down the middle. On one side I have a list of restaurants, I would like when/if a name of a restaurant is clicked on, an image of the restaurant and a description appears inside a div that is on the other side of the divided page.
I am trying to do this with jQuery and have it so when there is a click event the id of the name clicked is stored in a variable and then that variable corresponds to a picture which will then be displayed in the div.
I am sure there is simpler way to do this, and I am drawing a blank on this, or if someone could help me in doing it in the way I am trying, it would be greatly appreciated. All insight is welcomed and thank you.
This is new to me. I know i could do it by going through each id and having its own function call but I am trying to be less repetitive and have a function that works for all. thanks
JS CODE :
$('.hover').click( function(){
var iD = $(this).attr(id);
$('.pictureofeats').removeAttr("id");
$('.pictureofeats').attr('id', iD);
});
HTML CODE :
<div class="row drinks brunchpic">
<img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li>
<br>
<li class="hover" id="716">716 (Food and Sports)</li>
<br>
<li class="hover" id="bdb">Big Ditch Brewing</li>
<br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li>
<br>
<li class="hover" id="lloyds">Lloyds</li>
<br>
<li class="hover" id="abv">Allen Burger Venture</li>
<br>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" id="foodInfo">
<div class="row">
<div class="pictureofeats" id="foodImg"></div>
</div>
</div>

Store the required classname in the data-id attribute for the restaurant name
and toggle the display for the images keeping the positioned as absolute
JS Fiddle
Structure your HTML as following:
<div class="parent">
<div class="a">
<div class="img1 active">
1
</div>
<div class="img2">
2
</div>
<div class="img3">
3
</div>
</div>
<div class="b">
<div data-id="img1">abc</div>
<div data-id="img2">def</div>
<div data-id="img3">ghi</div>
</div>
</div>
CSS:
.parent {
width: 100%;
}
.a,.b {
display: inline-block;
min-width: 48%;
}
.img1,.img2,.img3 {
position: absolute;
display: none;
}
.active {
display: block;
}
JS:
$('.b div').click(function() {
var x = $(this).data('id');
$('.a div').removeClass('active');
$('div.' + x).addClass('active');
})

try something like this:
<div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png" width="200px"/>
<div class="row">
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="coles">Coles</li><br>
<li class="hover" id="716">716 (Food and Sports)</li><br>
<li class="hover" id="bdb">Big Ditch Brewing</li><br>
</ul>
</div>
<div class="col-xs-6 lists">
<ul>
<li class="hover" id="barbill">Bar Bill</li><br>
<li class="hover" id="lloyds">Lloyds</li><br>
<li class="hover" id="abv">Allen Burger Venture</li><br>
</ul>
</div>
</div>
</div>
and in javascript:
$('#restId').click( function(){
$('#restId img').attr('src', newSource);
});
I think this is the logic

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

Bootstrap slideshow not working

I am trying to make the bootstrap tabnavigation as a slideshow like switching the tabs automatically and I want to reset the timer when user click the navigation buttons, but here it is not working please help me to fix the problem in this script. I tried it here jsfiddle
tabSlideshowSetup('#slideshowOne');
tabSlideshowSetup('#slideshowTwo');
function tabSlideshowSetup(parent) {
var toime = 0;
var tabs = $(parent).children('.dot-nav > li');
var tabsPagenationDots = $(parent).children('.dot-nav > li > a');
function imgFunc(){
var active = tabs.filter('.active'),
next = active.next('li'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
}
toime=setInterval(imgFunc, 18000);
tabsPagenationDots.click(function(){
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
});
}
Html code is here:,
<div id="slideshowOne" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="slideshowTwo" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>

jsFiddle Demo
tabsPagenationDots.click(function () {
clearInterval(toime);
toime = setInterval(imgFunc, 3000);
tabsBox.hide();
var index = tabsPagenationDots.index(this);
tabsBox.eq(index).show();
});

Scroll to section by clicking list

I want to make a scroll to the corresponding .cinematography_box when I click on a item on the list of the sidebar, I have with this markup:
It would be like, first item on the list > goto > first .cinematography_box div and so on on the second, third and etc
What would be the best way to achieve this?
<div id="sidebar" class="clearfix">
<ul>
<li>
<a id="aboutlink" href="javascript:void(0)" >CINEMATOGRAPHY LIST</a>
</li>
<li>
FIRST ITEM
</li>
<li>
SECOND ITEM
</li>
<li>
THIR ITEM
</li>
</ul>
</div>
<div id="gallery" class="cinematography clearfix">
<div class="cinematography_box clearfix">
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="cinematography_box clearfix">
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="cinematography_box clearfix" >
<div class="cinematography_item">
</div>
<div class="cinematography_info">
<p>Lorem Ipsum</p>
</div>
</div>
</div>

Define each element like that:
<li data-target="one">
THIR ITEM
</li>
<div class="cinematography_info" data-pos="one">
<p>Lorem Ipsum</p>
</div>
And using jQuery you could do this:
$(document).ready(function(){
$("li").click(function() {
scrollTo($(this).attr("data-target"));
});
});
function scrollTo(target){
var tagScroll = $(".cinematography_info[data-pos='"+ target+"']");
$('html,body').animate({scrollTop: tagScroll .offset().top},'slow');
}
See the example that i've made:
http://jsfiddle.net/NfwEv/9/

First, give your three div tags ID's, say item1, item2, item3.
That way, you can change your a tags to be:
<li>
FIRST ITEM
</li>
<li>
SECOND ITEM
</li>
<li>
THIR ITEM
</li>