JavaScript - Creating A Jquery Function With 3 Divs

I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax.
I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope.
I also tried writing separate plugin for my need but i don't have clear idea how does it work.

So please either suggest a way or give me link to article which is simple to understand and can clear how it work.

I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right

thanks

I have made a code which is for a 9 tile picture puzzle.And i have done it for click event.now i want to make it possible to drag and drop to swap divs rather than clicking.So how do i swap divs with only javascript.[p.s my divs are dynamically created]

not sure if I"m doing this correctly so seeing who can see or tell me if I'm doing this wrong.

Say you chose an option from select box it would go into the events table and see that there's not been another event with that id so it'll return 1 and put it inside the text field called Label and when the user fills out the rest of the form it'll put 1 for the label field in the database table when the form is submitted then say the next week rolls around and the user clicks on that same option again and it goes to the events table and sees that there's an occurance of that show via the matching eventids and grabs all the labels with that matching eventid which at this point is only 1 so it would add 1 to that number and return 2 to the Label form text field.

form page
Code:

$('#eventid').change(function() {
      var eventid = $("select#eventid").val();
      var dataString = 'eventid='+ eventid;
      $.ajax({
        type: "POST",
        url: "processes/booking.php",
        data: eventid,
        success: function(data) {
        $('#label').append(data);
        }
        });  
    });

<div class="field required">
    			<label for="eventid">Select Event</label>
                <select class="dropdown" name="eventid" id="eventid" title="Select Event">
                <option value="0">- Select -</option>
                <option value="0">** Recurring Events **</option>
                <?php
                    $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Recurring"';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
                    }
                    ?>
                <option value="0">** Singular Events **</option>
                <?php
                    $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Singular"';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
                    }
                    ?>
                <option value="0">** Pay Per View Events **</option>
                <?php
                    $query = 'SELECT id, eventname FROM eventnames WHERE eventtype = "Pay Per View"';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                        print "<option value=\"".$row['id']."\">".$row['eventname']."</option>\r";
                    }
                    ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
				<label for="label">Event Label</label>
				<input type="text" class="text" name="label" id="label" title="Label" readonly="readonly" />
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
			</div>

processes/booking.php
PHP Code:
$eventid = (int)$_GET['eventid'];
$result = mysqli_query("SELECT * FROM `events` WHERE `event_id` = '$eventid'");
$list = mysqli_num_rows($result);
$label = $list + 1; 

I am attempting the use EasySlider to create a portfolio.
Which you can view here.

The EasySlider is embedded within an accordion, under the Portfolio tab. I have the first slider functioning properly, which you see by clicking on the Burts Bees tab. However, when you on to the MillionTrees and other tabs the EasySlider does not work.

I know that the other tabs are being affected by the function because when you move the images under Burts Bees to a new image and switch back to Million Trees the beginning image changes. I have a feeling I am somehow using the buttons wrong, but I am not sure because I am very new to using JavaScript and jQuery. Any help would be greatly appreciated, thanks.

Hi i have a code like this in my web site to slide a panel from left to right:
<script type="text/javascript">
<!--
var sipPos = 0;
$(document).ready(function() {


$("#panel-tab").click(function(e) {
//if(autoTimer) clearTimeout(autoTimer);
//autoTimer = null;

e.preventDefault();
$("#panel").animate({ left: sipPos }, 1764, 'linear', function() {
if(sipPos == 0) { sipPos = -856; }
else { sipPos = 0; }

});
});
});
-->
</script>

---CSS---

#panel {
width: 864px;
height: 369px;
position: absolute;
top: 195px;
left: -856px;/*-856*/
z-index: 200;
background:url('../images/bg_panel.png') no-repeat;
padding:20px 0 0 18px;
text-align:left;
}
#panel-tab {
width: 21px;
height: 371px;
position: absolute;
top: 9px;
left: 856px;
background:url(../images/panel-arrw-show.png) no-repeat;
text-decoration: none;
color: #FFFFFF;
text-indent:-999999px;
}

What i want to do is use the animate function in jquery...like this $("#panel").animate({ left: 0 }) but not sure how to use that and on page load make the panel opens and stays open..

Any help

Sam

Hi,there,
my following script generates random numbers and if random number==1
the background color of textbox="red"; so far it works fine..
What I m tring to do is to tell my script to write amessage in the same textbox after 5 seconds
so ı need a delay function..
thanks for help


PHP Code:
 
 <body bgcolor="pink">
<script>
       stopx=setInterval("gox()",500);
       function gox()
       {
       var box1=document.getElementById("box1");
       var box2=document.getElementById("box2");
       box1.value=Math.floor(Math.random()*5);
             if(box1.value==1) box2.style.backgroundColor="red";  
          //////////////
          //  I need a delay function here;          
          //
          //////////           
          //???// if(delay==5) box2.value=" 5 seconds passed ,now I will give another message";
                 }    
</script>  
<input type="text" id="box1" style="position:absolute;top:50px;left:20px;width:40px;height:20px;">
<input type="text" id="box2" style="position:absolute;top:50px;left:200px;width:200px;height:50px;">
<input type="button" value="try again" onclick="location.reload()"
style="position:absolute;top:250px;left:20px;width:60px;height:50px;"> 

Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great.

Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function...




Code:

var srcpagParams = $H();
function buildPagi(param, currdsplyNum){
       var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'),
           crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see
           dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page
           ttl_lnks  = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages
           data_template = new Hash();
           data_template.set('total_display',srcpagParams.get('numFound'));

        bldImg = function() {
              var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>';
              var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>';
              data_template.set('prvImg',(crnt_link > 1) ? prvB : "");
              data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB  : "");
       }
        bldLk =  function(){
           var holder = "";
           if(ttl_lnks > 1){
             var linkStr = new Template('&nbsp;&nbsp;<a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a>&nbsp;&nbsp;');
               $R(1,ttl_lnks).each(function(n) {
                  var posit = {pos : n}
                  holder += (crnt_link == n) ? "&nbsp;&nbsp;" + n + "&nbsp;&nbsp;" : linkStr.evaluate(posit);
               });
                  data_template.set('links',linkholder);
           }
        }
        bldRng =  function(){
            var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum);
            data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg);
             $('pages').update(temDsply.evaluate(data_template)).show();
        }
       firesrc = function(cl){
           var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1;
           var start = crnt_link * srcpagParams.get('paginateNum');
           Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request
       }
           bldImg();
           buildLnk();
           bldRng();
};


Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class.

But could I turn this into a class and if so - what I just use:

var buildPagi = create.Class({ 
       initialize: object.extend({

        })

})

Call the function when we are passed some data:
Code:

buildPagi(somevalue, somevalue2)

** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc..

so, is there a more eloquent, or robust way to write what I did above?

So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes?

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">	

	$(document).ready(function() {	

	$('#hdg').hover(function() {	
	
	$('div[title=latin]').toggle();
	$('div[title=english]').toggle();

	$('#').html('<h3>English</h3>');
		});
		});
</script>

I am trying to create a function that takes a users input in the form xx/xx/xxxx. Then I need to figure out a way to compare to a new date and give which day of the year it is when using: alert("This is the" +foo+ "day of the year."). Im alittle confused on how to take the users input and compare it somehow to give me the day of the year.

I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next.

The source was used from Edit fiddle - JSFiddle

the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC.

I am open to any suggestions.

Code:

 <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
    
  
  <style type='text/css'>
    .cycle-slide {
    width: 100%;
    text-align: center;
}
img {
    max-width: 300px;
}

#next {
    float: right;
}
#prev {
    float: left;
}
.center {
    text-align: center;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){ 
var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');
    
    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }
    
    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();
});//]]>  

</script>

Hi, I've been playing around trying to recreate the way in which jQuery chains it's functions for it's "select" then "do" behaviour.

Note: I don't want to chain functions with jQuery, I want to chain them like jQuery.

So based on the jQuery code what I have so far is (doesn't work in IE):

Code:

var x = function(string) {
    return new x.fn.init(string);
};

x.fn = x.prototype = {

    message: '',

    init: function(string) {
        x.fn.message = string;
    },

    log: function() {
       console.log(x.fn.message);    
    }
};

x.fn.init.prototype = x.fn;

var start = function() {    
    x('hello world').log();
};

document.addEventListener('DOMContentLoaded', start, false);

The code works but when I watch '$' in jQuery "fn" & "prototype" show up as being "jQuery()" but in my code when I watch "x": "fn" and "prototype" are both shown as objects containing "message", "init" and "log" and in both cases "init" contains "prototype" which contains my three functions again and the nesting continues seemingly infinitely...

I'm clearly missing something here. What are they doing in differently in jQuery to prevent this endless nesting loop?

Hi guys, new to the forum and a big noob to JavaScript! I've created a function that would hide and show paragraphs from a drop down list, that paragraph contains a link that will show a div containing a map of google. But when I switch to another State on the drop down list I'd like to have the original first paragraph that showed up to disappear. So far, I can only get the <div> that contains the map to disappear.

Can someone send me an example of a function that would hide the paragraph and the <div>? Again, I'm a noob baby talk please.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}


function showMap(divName) {
//if value of the box is not nothing and an object with that name exists, then change the class
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}

}

//-->
</script>
<style type="text/css" media="screen"><!--
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
border: 1px grey solid;
}
#ex1 {
position:absolute;
width:425px;
height:350px;
right:40px;
top:100px;
}
#ex2 {
position:absolute;
width:425px;
height:350px;
right:40px;
top:100px;
}


--></style>
</head>

<body bgcolor="#ffffff">
<form id="FormName" action="blah.php" method="get" name="FormName">
<select name="selectName" size="1" onChange="showDiv(this.value);">
<option value="">Choose State</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Indiana</option>
<option value="14">Iowa</option>
<option value="15">Kansas</option>
<option value="16">Kentucky</option>
<option value="17">Louisiana</option>
<option value="18">Maine</option>
<option value="19">Maryland</option>
<option value="20">Massachusetts</option>
<option value="21">Michigan</option>

</select>
</form>

<p id="1" class="hiddenDiv"><a href="#" onclick="showMap('ex1')">8160 du Creusot<br />St-Leonard, QC</a></p>
<p id="2" class="hiddenDiv"><a href="#" onclick="showMap('ex2')">9510 ave. Radisson<br />Brossard, QC</a></p>
<p id="3" class="hiddenDiv">This is paragraph 3.</p>
<p id="4" class="hiddenDiv"><a href="#l" onclick="showMap('ex1')">Home</a><br />
<a href="us/home.html">Home</a><br /></p>

<div id="ex1" class="hiddenDiv">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&amp;aq=&amp;sll=45.597664,-73.581356&amp;sspn=0.001501,0.004828&amp;ie=UTF8&amp;hq=&amp;hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&amp;ll=45.597373,-73.581641&amp;spn=0.001501,0.004828&amp;z=14&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&amp;aq=&amp;sll=45.597664,-73.581356&amp;sspn=0.001501,0.004828&amp;ie=UTF8&amp;hq=&amp;hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&amp;ll=45.597373,-73.581641&amp;spn=0.001501,0.004828&amp;z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div><!-- end ex1 -->
<div id="ex2" class="hiddenDiv">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+Can ada&amp;aq=0&amp;sll=45.597405,-73.581313&amp;sspn=0.001501,0.004828&amp;ie=UTF8&amp;hq=&amp;hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&amp;ll=45.43337,-73.487572&amp;spn=0.001506,0.004828&amp;z=14&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+C anada&amp;aq=0&amp;sll=45.597405,-73.581313&amp;sspn=0.001501,0.004828&amp;ie=UTF8&amp;hq=&amp;hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&amp;ll=45.43337,-73.487572&amp;spn=0.001506,0.004828&amp;z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div><!-- end ex2 -->


</body>

</html>

Hi there!

I'm trying to retrieve the integer value in the string: #10
So I'm using the JS Split function

Code:

<script type="text/javascript">

var str="#10";
document.write(str.split("#"));

</script>

Is the code I'm using, but I keep getting a comma before my result..
in this case, my result is ",10"

What should I do?
Thanks!

Kind Regards
Matthew

P.S. I know that it's an array, but is there still anyway for me to get rid of the comma?

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank