JQuery with php showing div element - javascript

The problem is when I press left-nav "a" element it should show() me the div element, but its going to hide() it automatically. The "a" element is created with php and it has href of ?id=$product, when I press class closebtn "a" element in side my navbar it show()'s me the div.
JavaScript:
$(document).ready( function() {
$(".sisu").hide();
$('.vasaknav a').click( function() {
$(".sisu").show();
});
});
PHP:
<?php
$kask=$yhendus->prepare("SELECT id,Product from store GROUP BY Product");
$kask->bind_result($id, $Product);
$kask->execute();
while($kask->fetch()){
echo "<a href='?id=$Product' style='color:red;'>".htmlspecialchars($Product)."</a>";
}
?>
HTML:
<div id="Myvasaknav" class="vasaknav">
×
<?php require('php/navlist.php'); ?>
<a href=# >test</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="click">☰</span>

To prevent default action when clicking <a> (which is reloading page / redirecting elsewhere) you should change your code like:
$(document).ready( function() {
$(".sisu").hide();
$('.vasaknav a').click( function() {
$(".sisu").show();
return false; // prevent default action
});
});
With this you will stay on the same page and .sisu element will be shown.

Related

Javascript add class active when click a link after load another page?

I have a list a.href to many URL contain film.
When I click a.href, it will reload my page. I don't know how to add the class .active to the a.href current selected.
In Ajax call, it simple like this code, it's working because the page is not reloaded. But I write on PHP and using $_GET and $_POST method. So the page must be reloaded.
Have any method to add the class .active on a.href link was clicked?
<div class="btn-group listEp col-md-12">
$i = 0;
Episode:
<?php foreach($data['episodes'] as $epList) { ?>
<a class="btn btn-default" href="<?php echo $epList['href']); ?>"> <?php echo $i++; ?> </a>
<?php } ?>
</div>
$(function() {
$('#listEp').on("click", "a", function() {
$( "#listEp a:first-child" ).css("cssText", "background: #4CAF50 !important;");
$(this).addClass('active').siblings().removeClass('active');
});
});
If you don't want to reload page after click and create a custom action on this just do this:
$('#listEp').on("click", "a", function(e) {
e.preventDefault() // this will disable default action which is redirect in case of a element
e.stopPropagation() // this will stop element beeing propagated by other functions
$( "#listEp a:first-child" ).css("cssText", "background: #4CAF50 !important;");
$(this).addClass('active').siblings().removeClass('active');
});
Looks like you're targeting an ID which doesn't exist, the element has a class listEp. Try $('.listEp') instead
You can do simply like this,
$('a.btn[href]').click(function(){
$('a.btn[href]').removeClass('active');
$(this).addClass('active');
});
above code removes active class from other same elements and adds class in this element.
Add below code to that page which is rendering on reload,
$(document).ready(function(){
$('a.active.btn[href]').removeClass('active');
});

jQuery show unique popup for each link clicked

I have a series of links on my page, each link has a unique id: library_vid_link-UNIQUE_ID. When clicked, I want to show a popup which shows information unique to that link.
For each link, I have a hidden popup, which, when clicked, the popup is displayed. The popup also has a unique id: less_preview_popup-UNIQUE_ID (the unique id for the link and popup both match).
Here is a sample of my html code:
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>
Here is the jquery i'm currently using:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
$('.lesson_preview_popup').css('top', '25%');
$('body').addClass('no-scroll');
});
The issue I'm having is that when I click on a link, ALL the popups show, not just the one that relates to the link clicked. Is there a way to target the popup that belongs to the link clicked?
Use the data-attribute:
<a data-popup="lesson_preview_popup_801" ....
And
$("#"+$(this).data("popup")).show().css('top', '25%');
Using $(this).next() instead, assumes that the div to show is the next sibling of the link
Change this:
$('.lesson_preview_popup').css('top', '25%');
into this:
$(this).next().css('top', '25%');
Alternatively, save the ID (e.g. 801) in a new attribute, like this:
<a data-id="801" ...
Then, call the popup like this:
jQuery('.library_vid_link').click(function( event ) {
event.preventDefault();
var thisId = $(this).attr("data-id"); //get "801"
$('#lesson_preview_popup-' + thisId).css('top', '25%'); //construct the ID and call the popup by its ID
$('body').addClass('no-scroll');
});
Jquery .next() select next sibling of element. Use it like bottom example
$('.library_vid_link').click(function( event ) {
event.preventDefault();
$(this).next().show().css('top', '25%');
$('body').addClass('no-scroll');
});
$('.library_vid_link').click(function( event ) {
//event.preventDefault();
$(this).next().show().css('top', '25%');
//$('body').addClass('no-scroll');
});
.lesson_preview_popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="library_vid_link" id="library_vid_link-801">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-801">
THIS IS THE POPUP
</div>
<a href="#" class="library_vid_link" id="library_vid_link-802">CLICK HERE FOR MORE INFO
</a>
<div class="lesson_preview_popup" id="lesson_preview_popup-802">
THIS IS THE POPUP 2
</div>

jquery tabs access from urls

hello i have jquery tabs and want to access them from url using # but know know how can I full fill with it
requirement is mywebsite.com/#show_page1 will show the page 1 content
and if access from mywebsite.com/#show_page2 will show the page 2 content
here is the my js code
$(window).load(function(){
$(document).ready(function(){
$("#nav_tabbed a").click(function(){
var id = $(this).attr('id');
id = id.split('_');
$("#menu_container div").hide();
$("#menu_container #show_"+id[1]).fadeIn();
// remove classes from all
$("a").removeAttr("style");
// add class to the one we clicked
$(this).css("background-color","#1aaede");
// stop the page from jumping to the top
return false;
});
$("#menu_container #show_page1").show();
});
});
and html i have is
<div id="nav_tabbed">
<a id="show_page1" style="background-color:#1aaede;">Page 1</a> <a id="show_page2">Page 2</a>
</div>
<div id="menu_container">
<div id="show_page1">
<!-- content here -->
</div>
<div id="show_page2">
<!-- content here -->
</div>
</div>
location.hash; will give you the hash value added in the addressbar and you can use it the way you need to. My suggestion is added below.
What seems to me you want to hightlight your link with the hash located in the browser's addressbar and respective div you want to show. If this is what you want to implement then you can try this with slight changes in the markup and js:
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
// below works for hash added in the browser.
var hash = location.hash;
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
$(document).scrollTop(0);
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
A sample fiddle.
your posts shows a little confusion on the topic.
so first for explanation:
there are two meanings of a #
in a url, the # is a reference to the location hash.
in jquery, the # is a reference to an element id.
you want to use the hash change in this case.
first of all... why do you wrap the window.load around the dom.ready event?
as far, as i understood, jquery's dom ready fires when the dom is ready, jquerys window.load fires, after all images, iframes, plugins etc. have been loaded. so a dom.ready inside a window.load is kind of unnecessary ...
next: ID's have to be unique - you can't give your anchor the same id as the assigned div!
so let's get down to business - the html:
<div id="nav_tabbed">
Page 1
Page 2
</div>
<div id="menuContainer">
<div id="page1" class="contentTab activeTab">123</div>
<div id="page2" class="contentTab">456</div>
</div>
we use activeLink and activeTab classes to determine which tab is currently open
the css just sets the background of the activeLink:
.activeLink {
background-color:#1aaede;
}
the js:
$(window).load(function(){
$(".contentTab:gt(0)").hide(); //on initial load, we hide all content tabs, despite the first one
$("#nav_tabbed a").click(function () { //the click handler for the navigation only toggles the class to change the background color
$(".activeLink").removeClass("activeLink");
$(this).addClass("activeLink");
})
if(location.hash) //here we check, if there already is a location hash set onload and then change to the desired tab
{
$(".activeTab").hide();
$(location.hash).show().addClass("activeTab");
}
});
//our hashchange event handles the loading of the desired tabs:
window.onhashchange = function () {
if(location.hash!=null) //this checks, wether the hashchange event has been fired, due to a deletion of the hash via url
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(location.hash).show().addClass("activeTab"); //show the clicked tab
}else //and per default show the first tab
{
$(".activeTab").hide().removeClass("activeTab"); //hide the current tab
$(".contentTab:first").show().addClass("activeTab"); //show the clicked tab
}
};
http://jsfiddle.net/ex46ndg1/3/

Dynamic HTML IDs (PHP, Java, and a bit of SQL)

I'm trying to create a web page which generates a series of unique DIV IDs, each displaying different content based off of the entries in an SQL table.
Each div has a "hide" and "show" button, which work independently when manually giving each div a unique name.
I can get the divs themselves to generate based on class names in PHP, which displays the divs correctly.
The problem lies in the "hide" and "show" buttons since they're controlled by JavaScript. The code is as follows:
for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{
if (mysql_num_rows($ans) > 0) //check if widget table is empty
{
$widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
$widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget
if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
{
echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
?>
<!----Start of weather Widget--->
<!---Script for show/hide buttons weather widget--->
<script>
var widg = "<?php echo $widgetusr[$j]; ?>";
var id = "#" + widg;
$(document).ready(function(){
$("#hide1").click(function(){
$(id).hide();
});
$("#show1").click(function(){
$(id).show();
});
});
</script>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
<!---End Script for show/hide buttons weather widget--->
<?php
echo "<div class = 'widget' id='$widgetusr[$j]'>
</div>
</div>
<!----End of Widget---> ";
}
}
else
{
echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>
I tried to pass the php varriable (containing an SQL value) to JavaScript (which works successfully, I was able to print out "#financial widget" as an id name.), however neither the show, nor hide button works. The generated divs all have the correct names also.
If additional information is required please ask. I tried to be as general as possible.
You really only need one button. Change your php to render the following html
<div class="widget_container">
<button class="btn ">Hide</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget2</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget3</div>
</div>
and output the following Outside of the loop, ensuring jQuery is loaded:
<script type="text/javascript">
//Standar jquery doc ready event, fires when the dom is loaded
$(document).ready(function(){
//add an event listener elements with a class of "btn"
$('.btn').click(function () {
//"this" is the element click, so we find siblings of this with a class
//of "widget" and toggle its visibility
$(this).siblings('.widget').toggle();
//Change the text of the button the below is short hand for:
//if($(this).text() == "Hide"){
// $(this).text("Show");
//}else{
// $(this).text("Hide");
//}
$(this).text($(this).text() == "Hide" ? "Show" : "Hide");
});
});
</script>
Example
Some useful links:
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/click/
http://api.jquery.com/siblings/
http://api.jquery.com/closest/
http://api.jquery.com/toggle/
http://api.jquery.com/text/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Example with fixed height widgets: http://jsfiddle.net/bdpm4/2/
Update 2
Perhaps a better way to do it: http://jsfiddle.net/bdpm4/3/
you should use class instead of id and dont put your $(document).ready() in the loop.
HTML:
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget2</div>
</div>
JS:
$(document).ready(function(){
$('.btn').on('click', function (evt) {
var btn = $(evt.target);
btn.siblings('.widget').toggle();
btn.parent().find('.btn').toggle();
});
});
CSS:
.showBtn {
display:none;
}
here is an example: http://jsfiddle.net/xdA4r/4/

drop down is not hidden when I click outside

This is my script. The script works when i click but it is not hidden when i click outside.
$(document).ready(function() {
//Translate(); //caling Language Translater function
$("#translate_image").attr('href', base_url)
$("#select_lang").click(function() {
$("#lang_visible").attr('style', 'visibility: visible');
})
})
Here's my HTML:
<li>
<div class="clsCurrent_Lan ">
<a class="clsHead_Link_Bg" href="#" id="select_lang">
<span>Select Language</span>
</a>
</div>
<ul id="lang_visible" >
<?php foreach($language_drops as $lang){?>
<li>
<a href="<?php echo admin_url('home/ch_language/' .
$lang->language_code)?>"
id="<?php echo $lang->language_code?>">
<?php echo ucfirst($lang->language_name);?></a>
</li>
<?php }?>
</ul>
</li>
$(document).mouseup(function(e) {
if ($(e.target).parents('#select_lang').length === 0) {
$("#lang_visible").attr('style', 'visibility: hidden');
}
});
Try that. Add it within your document ready call. Basically clicking anywhere besides in the #select_lang selector will cause the visibility of #lang_visible to be hidden.
I think you are going about this the wrong way, sort of like reinventing the wheel. So the behavior you want is to have a control where the user can select a language from a number of different languages? Rather than trying to roll your own, why not just use the "Select" element? You can use php to set up the "Select" initially, and then use javascript/jQuery to respond to state changes.
So, something like this then?
$(document).ready(function () {
//Translate(); //calling Language Translater function
$("#translate_image").attr('href',base_url);
$("#select_lang").click(function () {
$("#lang_visible").attr('style','visibility: visible').click(function (e) {
$(this).hide(); //hides the #lang_visible element
//$(this).parent().hide(); //to hide the <li> containing the #lang_visible element
e.preventDefault();
return false;
});
});
});

Categories

Resources