I spent about hour and did not find any clue how to highlight my div.
Ok example my code.
1.proccess.php
$_SESSION['msg']='<div class="success">Your account has been updated</div>';
header("location:http://domain.com/account.php/");
2.account.php
if ($_SESSION['msg']!="") {
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
Now I want the javascript or jquery to highlight the <div class="success"> on account.php. How to do that? Let me know :)
jQuery UI has a highlight effect:
$(document).ready(function() {
$('div.success').effect("highlight", {}, 3000);
});
The above code will need to be loaded into the page containing your div, along with jQuery, jQuery ui.core.js and effects.highlight.js
You probably were looking for this:
http://docs.jquery.com/UI/Effects/Highlight
That's the highlight effect which "focusses" your attention. So "focus" was just the wrong search term to go for?
Related
Hi does anyone know if you can control a div thats encased in php like the one below?
I want to try and find a way of using javascript to fade the div in after a 3 second delay when the page loads?
Can anyone show me a way of doing this?
i would imagine its something like this:
<script>
jQuery(document).ready(function($){
$('.dashboard_intro').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_arrow').hide().delay(2000).fadeIn(2000);
$('.dashboard_intro_text').hide().delay(2000).fadeIn(2000);
$('.exit_intro').hide().delay(2000).fadeIn(2000);
});
</SCRIPT>
<?php
$dashboard_intro = dashboard_intro();
while ($intro = mysql_fetch_array($dashboard_intro))
if ($intro['dashboard_intro'] == '0') {
echo "<div class=\"dashboard_intro_arrow\"></div><div class=\"dashboard_intro\"></div><div class=\"dashboard_intro_text\"><strong>Welcome to Your Dashboard</strong><br/><br/>These are your tools: Check Messages, Reviews & more.</div><div class=\"exit_intro\"></div>";
} ?>
PHP is run on the server and doesn't affect what jQuery does later in the browser. What does the rendered HTML look like? Something like your example code should do just fine. What's the problem, exactly? Here's a simple demo:
http://jsfiddle.net/tXhwH/1
<script>
$(function() {
$('.dashboard_intro_text').delay(3000).fadeIn(2000);
});
</script>
How to make a sliding up horizontal DIV container using jquery? So far I have the below-provided code. The problem is that the content of <h1 id="filter_content">Content</h1> is initially not hidden. Also I've seen very nice looking sliding up menus, something like the first screenshot here. So, when user clicks on +, the content slides up. Where can I actually find a sample code or some example?
<div id="filter">
<h1>Filter</h1><br>
</div>
<h1 id="filter_content">Content</h1>
<script>
$('#filter').click(function() {
if ($("#filter").is(":hidden")) {
$("#filter_content").show("slow");
} else {
$("#filter_content").slideUp("slow");
}
});
</script>
Hiya working demo click here or Initially hidden demo here
using slideToggle API: good read http://api.jquery.com/slideToggle/ Will do the trick for the exact behavior you are looking for.
code
$('#filter').click(function() {
$("#filter_content").slideToggle("slow");
});
I am trying to implement a hit counter within a news archive system.
The articles are displayed with a lightbox style jQuery plugin. This means that all the articles are loaded with the rest of the page, but are set to have display:hidden, until the relevant entry has been clicked on.
So, I can't have the PHP to increment the counter simply embedded in the page, and in a search to find something to trigger the counter, all I could think of was this change to display:block.
I am open to any suggestions, although I am more experienced with simple jQuery, I have a hunch AJAX may be needed here?
Thanks in advance for any help anyone can offer, and let me know if any other information would be useful.
Sorry, but the restrictions where I am currently working mean I only have IE6 at my disposal. So I can't comment on anyone's answers...this is the only way I think I can reply.
Response:
Thanks for everyone's fast responses. I don't think I can use plain jQuery as the system will be on an intranet and need to record the total number of visits across the network, therefore I don't think cookies would be sufficient.
I am going to attempt the load() function suggested by Bradley - a lot simpler than I thought it would be...feeling a little silly now.
Will update as to how I get on :)
Update:
I am trying to implement the load() function, with no success. The lack of firebug is also hindering by debugging.
Can anyone see what might be wrong with this code:
<script type="text/javascript">
$('#<?php echo $row->articleid; ?>link').click(function() {
alert("some encouraging text<?php echo $row->articleid; ?>");
$('#<?php echo trim($row->articleid); ?>target').load("/hitcount.php?articleid=<?php echo $row->articleid; ?>");
});
</script>
<div id="<?php echo trim($row->articleid); ?>link">Click2</div><br />
<div id="<?php echo trim($row->articleid); ?>target"></div>
Embarrassing Update:
...all that was wrong was the file path.
Just a simple hit counter? No feedback on user info?
$('#result').load('ajax/counter.php');
Edit
$('#somediv').click(function() {
$('#result').load('ajax/counter.php');
});
You don't really need Ajax, Just a javascript variable that gets incremented on any onchange event you place on each html input / dropdown / etc..., Then onsubmit, pass that javascript variable.
Yeah, ajax would help you here. You can bind to the click event on whatever navigation item switches the article to block display, and have it dispatch something to a click counter script.
<a href='#article-1' class='display-article'>display article 1</a>
<a href='#article-2' class='display-article'>display article 2</a>
<div id='article-1' style='display:none;'>article 1</div>
<div id='article-2' style='display:none;'>article 2</div>
<script>
$(function() {
$('a.display-article').on('click', function(event) {
var article_id = $(this).attr('href');
$(article_id).show(); // show the actual article
// and send the ajax request to the processor
$.get('/scripts/track-click.php', { article_id: article_id }, function(data) {
alert('article tracking complete!'
});
});
});
Goal: I'm trying to refresh content inside a div so that if the user is logged in, the page changes dynamically.
Progress: My first attempt was to use $("#tab_b").load("php/tabs.php #tab_b"); but this didn't update the DOM so the jquery styling didn't get applied. Then I tried adding the .trigger('create') function $("#tab_b").trigger('create'); This only led the style blink on and off for a fraction of a sec. Then I tried the .append() function which seems to work, I'm using the following code to test the function and this works:
$("#tab_b").html('');
$("#tab_b").append("<button type='submit' data-theme='a'>Test button</button>").trigger('create');
the only problem I have is fetching the content from the php file and then appending it to the div.
Content that should be refreshed: " #tab_b "
<div id="tab_b" class="content_div">
<?php
if(!isLoggedIn())
{
...
}
else
{
echo("
<button type='submit' data-theme='a' id='logout' >Logout</button>
");
}
?>
</div>
Any idea's on how to do this? Also Any suggestions on improvements are welcome, I'm a beginner programmer.
This question is an attempt to solve a bigger problem discussed in my other topic:
jQuery Mobile does not apply styles after dynamically loading content
this might work:
$( '#tab_b' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
I would look into the Event API
http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
I found that you can fetch data with $.ajax function. This returns the whole page.
My solution was to move the content that needed to be refreshed to a new php page,
tab_b.php and load it from there. Not sure if this is the best solution but it works.
$.ajax({
url: 'php/tab_b.php',
success: function (data) {
$("#tab_b").html('');
$("#tab_b").append(data).trigger('create');
}
});
I'm having issues getting jQuery tooltips (using Tipsy) to work. The tooltips work fine on regular pages, but I actually need the tooltips on a page that I am including through PHP. The reason why I'm including that page, is because I'm also using jQuery to auto-refresh that included page every x milliseconds.
It appears that this auto-refresh mechanism is keeping the tooltips from functioning properly. When I remove that mechanism, the tooltips appear but that part of the page obviously does not reload itself anymore at an interval. I'm looking for a way to get Tipsy to work while making sure my included page refreshes itself.
I include my page as follows:
<div id="vardisplay">
<?php include("vardisplay.php"); ?>
</div>
I then use the following script to refresh the "vardisplay" DIV, resulting in my included page to be reloaded:
<script>
$(document).ready(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay');
var refreshId = setInterval(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay')}, 750);
$.ajaxSetup({ cache: false });
});
</script>
The object I would want a Tipsy tooltip on (within my included page) could be something like:
<div id="TipsyMe" title="I got tipsied">
<p>Testpiece</p>
</div>
I'm currently trying to achieve that particular tooltip by putting this script on that page, which is supposed to show "I got tipsied" in a Tipsy tooltip:
<script>
$(function() {
$("#TipsyMe").tipsy({gravity: 's'});
});
</script>
What ends up showing is a regular browser tooltip where jQuery is fully ignored. Again, it works fine when I remove the auto-refresh mechanism on the main page.
I'm dumbfounded at this point. I've been Googling for the past few hours without any result what-so-ever. Any help would be greatly appreciated!
in the tipsy doc, you can stumble upon an option called "live"
$(function() {
$("#TipsyMe").tipsy({
gravity: 's',
live: true
});
});
shall do it. (as you seem new, accepting answer will attract people for your future answer hint hint hint :P)
be careful thou: "live tooltips do not support manual triggering." (from the doc)
EDIT: didn't see properly your code:
$(function() {
$("div.someTotal").tipsy({
gravity: 's',
live: true,
title: "I got tipsied"
});
});
"someTotal" is the class for all you "boxes" where you have the edit and delete icon. If you don't have such class yet, you can create one (you can name it tipsy by example) and use it ($("div.tipsy").tipsy({...