On my site in the bottom left hand corner there's a chat tab that you can open and close with a click. The button is named 'trigger' and the chat panel is named 'panel'. I'm not familiar with javascript really, I just cobbled this together from existing scripts, anyway, the code I use that works this is:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
What happens though is if the user opens chat then goes to another page, the chat must be reopened again. I need a way to keep the chat open if it's already open.
Maybe something in the body onload tag? And using sessions?
Note: My site's in php
With jquery-cookie you can save state of the chat class toggle. Something like this:
<script type="text/javascript">
$(document).ready(function(){
if($.cookie('panel-active')) {
$(".trigger").toggleClass("active",true);
}
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
$.cookie('panel-active', $(this).hasClass("active"), { path: '/' });
return false;
});
});
</script>
Related
I'm trying to add the following syntax to existing page in order to add the social media icon (linkedin, fb and twitter) into the page, but always bumped and it's not showing on the page.
I'm new especially for ajax and I don't know where is my mistake, I just want to load the icon on the end of the news.
Here are my code
<!--SEA New Add-->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("body").live("runScripts", function(){
$(init);
function init() {
$.get('news-sharesocial.html', inject);
}
function inject(data) {
debugger;
$('.news_sharesocial').html(data);
//$('body').html(data);
//document.write(data);
}
});
$('.news_sharesocial').trigger("runScripts");
//$("body").trigger("runScripts");
});
</script>
NOTE:
I put the code on the end of the page since this is only for news and this is a template.
Appreciate any help on this, I've been strugling with this for quite some time.
Thank you very much
-sea-
Very first thing you are using very old version of jQuery and live is deprecated tag in newer version.
Second you need to modify the code as below where you need to trigger event attach to body not to
news_sharesocial
$(document).ready(function(){
$("body").live("runScripts", function(){
$(init);
function init() {
$.get('news-sharesocial.html', inject);
}
function inject(data) {
debugger;
$('.news_sharesocial').html(data);
//$('body').html(data);
//document.write(data);
}
});
$("body").trigger("runScripts");
});
As you have attached the event to body so it will be triggered from same element.
so i am trying to make it so when you click menu on the mobile responsive version of this site right here http://dev.trafficdigitalagency.com/stage/ it toggles what is display:none; in the class "sub-menu"
here is the javascript/jquery I use (which can be found at http://dev.trafficdigitalagency.com/stage/js.js)
$(document).ready(function(){
$("#menu-item-3121").click(function() {
$(".sub-menu").fadeToggle("slow");
});
});
why when i click on menu in the responsive version does the sub menu not toggle?
I had the same issue the other day. Turns out the click event callback was being set up to fire twice, so the toggle looked like it wasn't firing at all. Ended up having to ensure any existing listeners are removed before adding one back. Note the off() call. Hope this works for you:
$(document).ready(function(){
$("#menu-item-3121").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
If you take a look at the console, (Ctrl-Shift-J in Chrome) where all JS erros all logged, you will see that the real problem relies on the way WordPress is loading the jQuery library in 'no conflict' mode.
I believe the solution provided here by #RedEyedMonster will help you, so write your function as this:
jQuery(document).ready(function ($) {
$("#menu-item-3121").click(function() {
$(this).find(".sub-menu").fadeToggle("slow");
});
});
I have a form inside a DIV (normally the div is hidden using "display:none;")
The user open the DIV with: onclick='$("#Details").show("slow");
Fills out the form and save the data.
I don't want the entire page to be reloaded, and I need only this DIV to be reloaded
I tried:
function(data) {
$('#Detalils').load(location.href + ' #Detalils');
});
and:
$("#Detalils").load(location.href + " #Detalils, script");
and:
$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})
where in #script I put my script
In this div I have some script, and because of the jQuery on load script execution, the script is not executed.
I cannot put the script in an external file, it must be in the page body.
Is there a way to execute the script a well?
Thanks
Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :
Instead of something like :
<form>
<input type="button" onclick="alert('hello');"> Click me ! </input>
</form>
Do something like :
<form>
<input id="myButton" type="button"> Click me ! </input>
</form>
<script type="text/javascript">
$("#myButton").click(function()
{
alert('hello');
});
</script>
You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.
The works within my local environment. Give it a shot in yours.
The HTML:
<div id="wrapper">
Remove
Reload
<div id="Details">my details box</div>
</div>
The jQuery:
<script type="text/javascript">
function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
mtarget = $('#Details'); //the element on your page, that houses your external content
mscript = 'external.js'; //the js script required for your plugin to work
mtarget.load("external.html", function(){
$.getScript(mscript, function() {
//run the plug-in options code for your external script here
});
});
//*/
}
function madjustments() {
/*ADJUST THE LOADING PROCESS*/
//remove the load request on click from your remove button
$('#mremovebtn').on("click",function(e) {
e.preventDefault();
$('#Details').children().remove();
});
//reload the request on click from your reload button
$('#mreloadbtn').on("click", function(e) {
e.preventDefault();
mload();
});
//*/
}
(function($){
mload();
madjustments();
})(jQuery);
</script>
You will obviously need 2 additional files. One called external.html and another called external.js, for my demo code to work. But you can change the naming process to whatever works for you.
Extra:
Set a class in your external html file (on the parent element), for example #external. And by default, set the CSS to display:none in the style sheet. Then when the page loads in, simply show() it in the jQuery code.
I'm creating a system using jquery and php that pops up a small div when they get a private message on my website. The alert itself I have figured out, but I'm not sure how to gracefully cancel it.
I've made it so that clicking a link "[x]" hides the div, but how can I make the link send enough information to a php script to mark this alert as "read" in the database?
All the php script would need is the id of the alert in the database, but I've got no idea how to make it do that. There is also more than one notice displayed at a time, so I would need a way to have each link send the information necessary to the php script.
Here's the jquery that loads the div and the php that powers it.
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#mc').load('/lib/message_center.php').show("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.delete').live('click', function(){
$('#mc').hide('slow');
});
});
</script>
The easiest solution would be to set the message you are displaying to read at the moment you display it. That would not require any additional communication between the browser and the server, just do it at the end of your /lib/message_center.php script for the messages you are displaying at that moment.
Set the href attribute for your X produced by php like href="javascript:killbox(5);" and give your div a unique id (i.e.id="boxtokill5"). Then you could use something like this:
function killbox(id){
$("#boxtokill"+id).hide();
var packet = {};
packet.clickedlinkid = id;
$.get("destination.php",packet,function(data){
// data = Response (output) from script
});
}
The destination.php receives the ID by $_GET['clickedlink'].
Is there any way to listen for hashchanges in the url and log the event for use of a backbutton in AJAX etc.
Using links like such:
Go to page!
and script like this:
<script type="text/javascript">
$(function () {
if (window.location.hash){contentload(window.location.hash);}
$('a').click(function() {
fragment = this.hash;
contentload(fragment);
});
});
function contentload(fragment) {
fragment = fragment.slice(1).replace('!', '')
$('#content').load('http://mysite.com/'+fragment+'?ajax=1');
}
</script>
I need to try and save the state of the page, Ive seen the jQuery address plugin but have no idea how to implement this..
take a look at this jquery plugin
http://benalman.com/projects/jquery-bbq-plugin/
i solved this using the jQuery Address plugin