Iam trying to have 3 buttons, and when i press one, it will show the content of a php file. This is what i have done so far:
In the main Html file:
<div class="buttons">
<a class="showSingle" target="1">Logg</a>
<a class="showSingle" target="2">Saker</a>
<a class="showSingle" target="3">Rediger Kunde</a>
</div>
<div id="div1" class="targetDiv"><?php include 'php/loggselect.php'; ?></div>
<div id="div2" class="targetDiv">Saker</div>
<div id="div3" class="targetDiv">Rediger </div>
And later in the same file:
<script type="text/javascript">
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>
Have two problems: When I reload the page, all 3 divs are showing, I have to press one of the "buttons" to only show the content of that spesific button.
The next and biggest problem is that this is working fine as long as it is plain text. But when I use <?php include 'php/loggselect.php'; ?> it will no longer show / hide. The php file should display a table with search result from my database. But it does not work when the php only contains `
echo 'testing';
?>` either. Any soulution?
Thanks!
Problem #1: You can do,
CSS: .hiddenDiv {display:none;}
And add this class to every div
$(function(){
$(".showSingle").eq(0).trigger("click");
});
Problem #2: Do
var _var1 = "variableone";
$("#div1").load('php/loggselect.php?v1='+_var1+'&v2='+_var1);
Don't do <?php ... ?>
Related
I have following script to show the ratings for courses. But it is working properly for pagination first page showing 5 stars, when it comes to second page it showing 10 stars. Code is like below,
<div class="ft-item">
<div class="rating_<?php echo $row->courseId;?>">
</div>
<script>
$('.rating_<?php echo $row->courseId;?>').raty({
starOff : '<?php echo base_url()?>public/images/star/icon-star-2.png',
starOn : '<?php echo base_url()?>public/images/star/icon-star-1.png',
starHalf: '<?php echo base_url()?>public/images/star/icon-star-3.png',
readOnly : true,
half : true,
score : <?php echo $r;?>,
space : true
});
</script>
First page course image
In this course five stars are displaying and located in first page.
Second page course image
In this course 10 stars are displaying and located in second page.
Is the above script is not binding in second page?
As you are calling the pagination via ajax, then you need to call your script after ajax response in the success function too. But the problem is that your score needs to be specific to every book/item, you need to change the
score : <?php echo $r;?>
and
$('.rating_<?php echo $row->courseId;?>')
and get the score via javascript rather than php and move the function into ajax success. Now to get the data from the javascript and removing php you need to use data attributes for this purpose add the rating like data-rating=<?=r?> whie populating the html via php and then use .each and iterate all elements and get the respective data-rating attribute in javacript via $(element).data('rating') and assign to the rate option. You can see the below example how to populate the rating based on the data attrbutes you just need to copy this javascript and update you html accordingly and you are done.
$('.rating').each(function() {
var ele = $(this);
$(ele).raty({
starOff: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-off.png',
starOn: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-on.png',
starHalf: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-half.png',
readOnly: true,
half: true,
score: ele.data('rating'),
space: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.js"></script>
<div class="ft-item">
<div class="rating" data-rating="3"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="2"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="1"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="5"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
Im trying to make a left side navigation that slides down with sub categories when you click on one of the links.
I've got it to work for the top link only but the others dont work.
In my header file I have some jquery script like this:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
in my HTML/PHP i have this code:
<div id="left-prod-nav">
<ul>
<li class="top">Product Categories</li>
<?for($i = 0; $i < $count; $i++)
{?>
<div id="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><?=$result[$i]['categoryName']?></li> </div>
<div id="panel">Hello world!</div>
<?}?>
</ul>
<div class="clear"> </div>
</div>
so the navigation is there...and when I click on the top one, the others slide down so you can see the sub categories for the one I clicked.
however if I click any of the others nothing happens.
has anyone had this problem before or know how to solve it looking at my code?
Thanks
I can assume you are trying to accomplish something like this: http://jsfiddle.net/QQRy8/
$(".flip").click(function(){
$(this).next(".panel").slideToggle("slow");
});
I changed your jQuery to use classes, you should change your PHP to give each div a class name instead of an ID (ID's must be unique!)
This answer is based off this HTML:
<div class="flip">
<li>
cool
</li>
</div>
<div class="panel" style="display: none;">Hello world!</div>
I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">
So I have a website that navigates by scrolling through a pane of DIVs that's wrapped inside a main DIV via. JQuery/javascript: http://plugins.jquery.com/project/ScrollTo
E.g.
<div id="content" style:"overflow:hidden; width 800px;">
<div id="home" class="page"></div>
<div id="about" class="page"></div>
<div id="support" class="page"></div>
</div>
It navigates and scrolls fine, but attempting to provide dynamic URLs for the pages without breaking the scrolling feature (e.g. mywebsite.com?p=home) brings a bit of trouble.
So depending on what the GET request returns, I want the PHP script to automatically set the scroll position on page load; as the scroll bars are hidden, and can only be set via. javascript.
What is the best method for this?
Probably something like this
<script>
var goTo = '<?php echo (isset($_GET['p']) ? $_GET['p'] : "default_value"); ?>';
(function($){
$(document).ready(function(){
functionThatScrolls(goTo);
});
}(jQuery));
<script>
I would do it like this, just print the value of the $_GET['p'] into the script, just make sure to print a default value, and maybe sanitize the value of p someone could insert something into it.
hope it helped.
May I suggest simply using plain old anchor tags?
The way you've described your site doesn't seem to need all this js magic in order to achieve the effect you're looking for...
<div>
<a name="home">
<div>
</div>
</a>
<a name="pix">
<div>
</div>
</a>
<a name="about us">
<div>
</div>
</a>
<a name="contact">
<div>
</div>
</a>
</div>
Then, links to http://www.mywebsite.com/#home will go do what you're looking for, plus google will index it as a subsection of http://www.mywebsite.com/
I think if you put a ! before your anchor tag names, google will actually index each as a separate page.
EDIT: Go here, and scroll down to "Step-by-step guide".
Here is something I use to get the $_GET vars:
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var $_GET = getQueryParams(document.location.search);
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('#'+$_GET.p).offset().top},
'slow');
});
i have a section in my website that needs to be toggled by clicking on the title .
now i wrote this code to toggle when clicking on title
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
html part :
<h4 class="trigger">'.$row[title].'</h4>
<div class="toggle_container">
<div class="block">
'.$row[text].'
</div>
</div>
now with these codes everything goes fine , untill it just opens every title clicked and not closes opened ones ;
1st
now i have to change this script in a way that when i click on a title to toggle first check opened ones and close those first
2nd
and the other thing im wondering is how to make the first title to be opened already ,
when the page loaded the first title to be opened
thanks in advance
I was hoping one of the other answers would update and fix this, but both of them never toggle, they always show, here's how to toggle and hide the others like you want:
$(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow")
.siblings(".toggle_container").slideUp();
});
});
You can try out a demo here, it shows the first on load, and correctly toggles the rest.
This should do it I guess
$(document).ready(function(){
$(".toggle_container").hide();
$(".toggle_container:first").show();
$("h4.trigger").click(function(){
$(".toggle_container").hide();
$(this).toggleClass("active").next().slideToggle("slow");
});
});
Html
<h4 class="trigger">Title1</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
Javascript
$(document).ready(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
});
});
You can check working demo at http://www.jsfiddle.net/XnV69/3/