I am using following a tutorial from here: http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/
This is the script I use:
<script type="text/javascript" language="javascript">
$(function() {
// SETUP:
// When the info banner is clicked:
$('#setup').click(function() {
$('#intro').css("display","none");
$.cookie('intro', 'collapsed');
});
// COOKIES
// Info banner state
var intro = $.cookie('intro');
// READ THE COOKIES
if (intro == 'collapsed') {
$('#intro').css("display","none");
};
});
</script>
The script hides the following div as the cookie is read:
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
Everything work great but when the page loads the div is shown for a split second. I guess the solution is to present two different pieces of markup serverside according to the cookie info. I have no idea how to go about this.
On page load, you could use php to check the cookie, and then add a hidden class. Something like <div class="<?= $_COOKIE['intro'] == 'collapsed' ? 'hidden':'' ?>">
Edit:
In CSS then, you can add something like .hidden { display: none; } and use jQuery to add or remove that class.
You could just do something like:
<?php
if($_COOKIE['intro'] != 'collapsed') {\
//echo div...
}
if you are using PHP:
<?php if($_COOKIE['intro'] != 'collapsed'){ ?>
<div class="feedback attention" id="intro">
Text goes here
<a id="setup" href="#">Ok I get it, please hide this</a>
</div>
<?php } ?>
To completely remove the div rather than just hide it.
check $_COOKIE array for 'intro'
if ($_COOKIE['intro'] == 'collapsed')
//...
simply, add some kind of "hidden" class to the div, or specify it like style="display: none;"
//edit
actually, by adding the "style" attribute you ensure that the div is not displayed as soon as get parsed, while using "class" property might cause interval while waiting for CSS file.
thus
<div<?= ($_COOKIE['intro'] == 'collapsed') ? ' style="display: none"' : '' ?>> ..</div>
is best here.
Related
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 ... ?>
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');
});
Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.
I am attempting to write some jQuery code that will expand a paragraph when a link is clicked and once expanded present another link that will allow the paragraph to be collapsed. These paragraphs are all generated within a foreach loop and I am having trouble selecting the correct paragraph because I am not sure of the best way to create unique IDs to pass back to jQuery because there in a loop.
Here is my view code:
<? foreach ($e['comments'] as $comment) : ?>
<div class="comment">
<p class="collapsed">
<?=character_limiter($comment['comment'], 100) ?><br />
Show More
</p>
<p class="expanded">
<?=$comment['comment'] ?>
<a href="#" class="collapse" >Show Less</a>
</p>
</div>
<? endforeach; ?>
And here is what I have so far with jQuery:
$(document).ready(function()
{
$("p.expanded").hide();
$("a.expand").click(function()
{
$(this).parent().hide();
return false;
});
});
I am able to hide the correct when clicking "Show More", however I am lost as to choosing the correct "expanded" paragraph and then implementing the opposite for collapsing.
My thoughts so far are that I need to somehow make the elements in question have unique ideas. The $comment array does have an 'id' value that code be appended to an id name for each attribute making them unique, but I am still confused about how to properly select things with jQuery.
IDs aren't the only way to target individual elements - you can target elements around the current jQuery element using a variety of methods, just like you have with parent.
You should be able to target the corresponding "expanded" block using siblings():
$("a.expand").click(function()
{
$(this).parent().hide();
$(this).parent().siblings('.expanded').show();
return false;
});
I have this code:
$.getJSON("Featured/getEvents",
function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text("Text");
if ( i == 4 ) return false;
});
});
I am doing this in conjuction with a php loop to render a div 5 times, I want to place my content into the ID's from the JSON using var and the .text(), but it is not working, How do I get a var, in this case title into the jquery text() so it can place it in the corresponding div?
This is the corresponding php(partial) that this connects to:
<?php for($i = 0; $i <= 4; $i++)
{ ?>
<div id="event-item-<?= $i?>" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
This is the rendered version:
<div id="event-item-0" class="event">
<div class="column-left">
<div class="title"><h3></h3></div>
<div class="inner-left">
<img src="http://philly.cities2night.com/event/85808/image_original" class="image" width="133" height="100">
<p class="author">Posted by: <br> Brendan M. (22 Events)</p>
</div>
<div class="inner-middle">
<p class="description" id="description-0"></p>
<p class="notify"><img src="images/recommened_ico.png" alt="Recommened Event" width="98" height="21"></p>
<p class="links">
<!-- AddThis Button BEGIN -->
<img src="http://s7.addthis.com/static/btn/lg-share-en.gif" alt="Bookmark and Share" style="border: 0pt none ;" width="125" height="16"><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=philly2night"></script>
<!-- AddThis Button END -->
View Event</p>
</div>
</div>
<div class="column-right">
<ul id="event-options">
<li class="total-attending"><span>502Attending</span></li>
<li class="rsvp"><span>RSVP</span></li>
<li id="like" class="notlike"><span>(3) Likes <br><span class="message">Do You Like it?</span></span></li>
<li class="comment"><span>Comments (200)</span></li>
<li class="location"><span>Location Name</span></li>
</ul>
</div>
</div>
...
</div>
It should be as simple as referencing the variable.
$("#title-"+i).text( title );
or, if your title includes mark up,
$("#title-"+i).html( title );
If this doesn't work, make sure that you aren't getting any javascript errors that prevent the code from running.
EDIT: This may or may not be related, but I would avoid using event as a variable name. Too easy to confuse with the window.event object and it may cause other problems. Generally, I'd use evt in this case.
Other possibilities: You aren't running the getJSON method after the document is done loading or the method isn't relative to the current page. If the simple things don't seem to be getting you anywhere, you may try using Firefox/Firebug to step through the code and see what it is doing. My simple example with your mark up and just using jQuery to set the text of the anchor worked fine so I don't think the problem is in the code where the text is being set.
$(function() {
$.getJSON("/Featured/getEvents",
function(data){
$.each(data.events, function(i,evt){
var title = evt.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});
});
You want to use .html(val).
Edit: Actually, .text(val) will place the text inside the element as-is. Using .html(val) will let any HTML you are adding render appropriately.
Did you try this, using title instead of "Text"?
$.getJSON("Featured/getEvents", function(data){
$.each(data.events, function(i,event){
var title = event.title.substr(0,20);
$("#title-"+i).text(title);
if ( i == 4 ) return false;
});
});