jQuery Event slideDown to Slide right - javascript

I'm using a simple jQuery Event Calendar script. Because I'm no good with jQuery. However when you click on a day with an Event the Event information drops down. I believe I've located the correct piece of code for this function.
function displayEvent() {
$('tbody.event-calendar td').on('click', function(e) {
$('.day-event').slideUp('fast');
var monthEvent = $(this).attr('date-month');
var dayEvent = $(this).text();
$('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
});
};
/**
* Close day-event
*/
$('.close').on('click', function(e) {
$(this).parent().slideUp('fast');
});
So my question is. How can I make this slide right instead of down? Because of the layout of my Website I'd rather the Event information came out to the right.
Thank you in advance!!
EDIT;
Plugin Link: http://jquery-plugins.net/jquery-simple-event-calendar
Github Link: https://github.com/philipehsing/jQuery.Simple-Event-Calendar
Demo: http://www.jqueryscript.net/demo/Creating-A-Pretty-Event-Calendar-with-jQuery/#
PS: I couldn't get it to show in JsFiddle, not sure why. But you can see with the Demo how it works! I hope this is enough information.

Related

How can I use jQuery Mobile to show a gif on touch?

On a desktop, my code works. I need to adapt it for mobile and am not having any luck. I tried jQuery mobile tap and taphold without any luck.
I would like the user to be able to tap anywhere on the screen and show a hidden image. I actually have about 20 divs,each containing an image, but I want to only show one at a time. For desktop, I am using keyup/keydown and it works perfectly.
JSFiddle
<div class="photo" data-key="1">
<img class="item" data-id="image">
</div>
$(window).on('keydown', function(e) {
$(data-key=" ' + e.which + ' ").show();
SOLVED! I'm new to programming, so I don't know if this is the smartest way to go about it and would love feedback for a smarter solution. Thanks, #Sushil for suggesting touchstart. And thanks, #ezanker. Your code worked perfectly in the fiddle. I was certainly implementing something wrong on my end. Here's what I did:
var tapStart = function() {
var randomGfy = Math.floor(Math.random() * $('.gfy').length);
$('.gfy').hide().eq(randomGfy).show();
}
var tapEnd = function() {
$(randomGfy).hide();
}
var init = function() {
$(window).bind('touchstart',tapStart).bind('touchend',tapEnd);
}
init();

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

One function in jquery, any step by step guides out there on how to Reset it?

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".aj-hidden").hide();
jQuery(".aj-hidden").addClass("aj-visible");
jQuery(".aj-collapse").one( 'click', function() {
rel = jQuery(this).attr('rel');
jQuery("#" + rel).slideToggle('fast');
});
});
Sorry if this is impossible to do, I have searched all over this site with little idea if I'm even looking at the right answer.
Its taken me some time to figure out the "one" function and it gets me half the way there, I just want to know if I can possibly reset the link to be clicked again afterwards?
If you just want a function to be used multiple times why don't you use the .click() attribute of jQuery?
That would look like:
jQuery(".aj-collapse").click( function() {
rel = jQuery(this).attr('rel');
jQuery("#" + rel).slideToggle('fast');
});

Strange issue with jQuery's slideUp/slideDown

I use the following code on a website:
// show tracks
$('.content-playlist .track p').live('click', function() {
var player_handle = $(this);
$('.content-playlist .track .player').slideUp('slow', function() {
player_handle.next().slideDown('slow');
});
});
Which should first closes any music players on the site (if any) and after that open the selected one.
Clicking the first track works as expected.
However I'm having a strange issue:
When clicking on the third track it opens, closes and opens again. (not what I want)
An example is online #: http://www.psykotaktyle.com/index.php?page=playlist
I just cannot find out what´s wrong with my code. Any help is much appreciated!
EDIT
Tested with Chrome (v13), IE9 and FF4
DEMO
$('.player').hide();
$('.content-playlist .track p').live('click', function() {
$('.player:visible').slideToggle(600);
$(this).next('.player').slideToggle(600);
});
This sounds like animation queuing as described at http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup
Try:
$('.content-playlist .track .player').stop().slideUp('slow', function() {
player_handle.next().stop().slideDown('slow');
});

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?

Categories