jQuery Forum

Selectors: Selecting the last of a series, per div
[2Replies]
- 06-Jun-2012 01:34 AM
- Forum: Using jQuery
Hi all,

Just need a hand figuring out the selector to use:

I have a series of divs witihin divs like this:
1. <div class="bigdiv">
2. <div class="littlediv">
3. </div>
4. <div class="littlediv">
5. </div>
6. <div class="littlediv">
7. </div>
8. </div>
9. <div class="bigdiv">
10. <div class="littlediv">
11. </div>
12. <div class="littlediv">
13. </div>
14. <div class="littlediv">
15. </div>
16. </div>
17. <div class="bigdiv">
18. <div class="littlediv">
19. </div>
20. <div class="littlediv">
21. </div>
22. <div class="littlediv">
23. </div>
24. </div>
I want to .removeClass on the last littlediv in each bigdiv.

Currently I am using:

$('.bigdiv .littlediv:last').removeClass("classname");

but this only affects the very last littlediv

Can any one help me out to have this affect all of the last littledivs within each bigdiv?

Thanks!

Using JQUERY to get elements from iframe
[3Replies]
- 04-Jun-2012 03:19 AM
- Forum: Using jQuery
Hi all,

I am having trouble getting elements from an iframe. I thought this was possible with jquery .contents() method, but is it?

Any advice would be awesome! Thanks!

All I get in the console is 'null'

This is what I have:
1. <iframe id="iframecontent" src="http://localhost/mbff_cms/"></iframe>
  
  <script type="text/javascript">
  
  $(document).ready(function() {
  
  var currentIFrame = $('#iframecontent');
  
  console.log(currentIFrame.contents().find('p').html())
  
  });
  
  </script>

Help needed to extend Twitter 'plugin' to also display date created
[4Replies]
- 03-Jun-2012 03:27 AM
- Forum: Developing jQuery Plugins
Hi all,

I have built this Twitter plugin by going through some tutorials. It works great but I would also like to display the date and time the tweet was created as well.

I was hoping someone might be able to help me modify this code:

Any help would be greatly appreciated!
1. (function($){
  
  //Creating Function called Twitterize
  
  $.fn.twitterize = function(username,options){
  
  //check to see if the username has been set.
  
  if (username){
  
  
  
  //SET DEFAULT AMOUNT OF TWEETS TO GET
  
  var defaultSettings = {
  
  count:'20'
  
  }
  
     // Finds which default settings have been overwritten by the options object
  
  // and creates a new object with all the new and untouched settings.
  
  var settings = $.extend(defaultSettings, options);
  
  // The URL for the Twitter JSON API.
  
  var url = "http://twitter.com/status/user_timeline/"+username+".json?count="+settings.count+"&callback=?";
  
  //Variable to get around scope problem in callback function.
  
  var holder = this;
  
  //Contact Twitter
  
  $.getJSON(url,
  
  //This function is called when twitter responds with the appropriate information.
  
  function(data){
  
  //Step through each tweet.
  
  $.each(data, function(i, item) {
  
  //place the tweet within a paragraph tag within the main div.
  
  holder.append("<p>"+item.text.makeLinks()+"</p>");
  
  });
  
  });
  
  }
  
  else{
    //IF Username paramater has not been set.
  
  console.debug("jquery plugin twitterize requires a username! Check your parameters");
  
  }
  
  //MAKE LINKS
  
  String.prototype.makeLinks = function() {
  
  return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(str) {
  
     return str.link(str);
  
     });
  
  };
  
  $(document).ready(function() {
  
  //Calling Twitterize - Assigning to Element and User
  
  $('#tweets').twitterize('username');
  
  });
  
  <div id="tweets"></div>

JQuery just not working on div swap script.
[3Replies]
- 29-May-2012 07:03 AM
- Forum: Using jQuery
Hi all,

I am a newb to JQuery so this is probably something Ive missed
I have what should be a simple piece of code - just hides and shows divs when a link is clicked.

So the code is meant to show the div related to the a tag thats been clicked in <footer>. If I click <a href="#camera">Camera</a> I want <div id="camera">Camera</div> to show - ie: become <div id="camera" class="current">Camera</div> as .current has the display:block; css, whist all other divs within #pages have display:none; css.

JQuery is:
Code: [Select]
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#tab-bar a').on('click', function(e){ e.preventDefault(); var nextPage = $(e.target.hash); $('#pages.current').removeClass('current'); }); }); </script>
CSS:
Code: [Select]
#pages > div { display: none; } #pages > div.current { display: block; }
HTML:
Code: [Select]
<div id="wrapper"> <div id="main-content">  <div id="pages"> <div id="map" class="current"> Map </div> <div id="camera"> Camera </div> <div id="twitter"> Twitter </div> </div> </div> </div> <footer> <ul id="tab-bar"> <li> <a href="#map">Map</a> </li> <li> <a href="#camera">Camera</a> </li> <li> <a href="#twitter">Twitter</a> </li> </ul> </footer>
I have tested to see if jquery is loaded and its ok. I have tested to see if the click is working using console.log and thats ok - I just dont know what could be wrong!

Any help would be greatly appreciated! Thanks!

Help with makeLinks() in Twitter plugin
[1Reply]
- 27-May-2012 06:07 AM
- Forum: Developing jQuery Plugins
Hi all,

I am using an old and pre-made plugin that simply displays a Tweet. The issue is this line:
holder.append("<p>"+item.text.makeLinks()+"</p>");

I am assuming that the makeLinks() turns any links in the tweet to actual, clickable links. But when I run it I get the error:
Uncaught TypeError: Object Tweet text blah blah blah http://t.co/W6GNA4ps has no method 'makeLinks'

If I remove the makeLinks() it works fine.

Can anyone help me identify what makeLinks() actual does and how to solve this error?

Thanks heaps!

The rest of the code is:
1. <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.js"></script>
  
  <script type="text/javascript" charset="utf-8" src="js/twitterrize.js"></script>
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
  //Calling Twitterize - Assigning to Element and User
  $('#tweets').twitterize('mbffbrisbane');
  });
  </script>
2. (function($){
  //Creating Function called Twitterize
  $.fn.twitterize = function(username,options){
  //check to see if the username has been set.
  if (username){
  //create an object full of default settings.
  var defaultSettings = {
  count:'1'
  }
  // Finds which default settings have been overwritten by the options object
  // and creates a new object with all the new and untouched settings.
  var settings = $.extend(defaultSettings, options);
  // The URL for the Twitter JSON API.
  var url = "http://twitter.com/status/user_timeline/"+username+".json?count="+settings.count+"&callback=?";
  //Variable to get around scope problem in callback function.
  var holder = this;
  //Contact Twitter
  $.getJSON(url,
  //This function is called when twitter responds with the appropriate information.
  function(data){
  //Step through each tweet.
  $.each(data, function(i, item) {
  //place the tweet within a paragraph tag within the main div.
  holder.append("<p>"+item.text.makeLinks()+"</p>");
  });
  });
  }
  else{
  //Username paramater has not been set.
  console.debug("jquery plugin twitterize requires a username! Check your parameters");
  }
  //Return itself
  return this;
  };//END TWITTERIZE
  })(jQuery);

Having troulbe installing TimePicker plugin
[1Reply]
- 20-Dec-2011 06:04 AM
- Forum: Using jQuery Plugins
Hi all,

This might be a pretty basic one but any help would really be appreciated! I am a noob to jQuery and am trying to install the TimePicker pugin: http://fgelinas.com/code/timepicker/

I have downloaded the files and uploaded them to my site. The code I have looks like this:

In Header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-timepicker-0.2.9/jquery.ui.timepicker.js"></script>

$('#timepicker').timepicker();

In body:

<input id="timepicker" type="text" name="leave">

Could anyone tell me where I've gone wrong here?

Thanks heaps!

Autocomeplete Help please!
[2Replies]
- 04-Nov-2011 10:59 PM
- Forum: Using jQuery UI
Hi guys,

I have successfully been able to implement the autocomplete form using: source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] as in the example.

But I want to draw data from an sql database. I have followed this tutorial:

http://beski.wordpress.com/2009/11/20/jquery-php-mysql-ajax-autocomplete/

Heres what I have:

<script type="text/javascript">
$(function() {
        $("#depart").autocomplete("scripts/autocompletecities.php", {
            width: 260,
            matchContains: true,
            selectFirst: false
        });
});
</script>

<input type="text" id="depart" name="depart" />

AND on the php file:

<?php
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT City as City from airports where City LIKE '%$q%'";
    $rsd = mysql_query($sql);
    while($rs = mysql_fetch_array($rsd)) {
        $City = $rs['City'];
        echo "$City";
    }
?>

I dont get any results or errors. The thing that confuses me a bit is the $q - it doesnt explain where that comes in on the tutorial.

Can anyone help me out? Thanks!

Having difficulty formatting JQuery DatePicker format
[1Reply]
- 04-Nov-2011 08:07 AM
- Forum: Using jQuery UI
Hi all,

I have searched the forums here for answers and found some, but they just arnt working on my version.

I am trying to reconfigure the DatePicker so it displays the date as dd-mm-yyyy

I have this so far:

     <script type="text/javascript">
    $(function() {
        $( "#datepicker" ).datepicker();

        $( "#datepicker" ).datepicker({ dateFormat: 'dd-mm-yyyy' });
    });
    </script>

But nothing changes.

Can anyone help me out?

Thanks!

Installing a UI (datepicker)
[6Replies]
- 12-Oct-2011 07:48 AM
- Forum: Getting Started
Hey guys,

Having some troubles installing the JQuery UI datapicker - well to be frank, I cant really figure out how to intsall it on my site. Can anyone help me out? Ive donwloaded everything but have no idea where to go from there.

Thanks

Help with Database Syncing Script
[1Reply]
- 10-Oct-2011 01:56 AM
- Forum: Using jQuery
Hi all,

Need a bit of help with a script. I have been following this tutorial here:

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-13/

But I cannot get the end product to work. Its driving me NUTS! FYI its a script that allows INSERT into database (1 table called comments with columns: id, name, email, and comments)

I get nothing on my error console to help me out. Just cant figure out whats wrong! Any help would be greatly appreciated! Thanks!

Heres what I have:

HTML:

<div id="formcontainer">

<form method="post" action="submit_to_db.php">
<label for="name">Name</label>
<input type="text" id="name" name="name" />

<label for="email">Email</label>
<input type="text" id="email" name="email" />

<label for="comments">Comments</label>
<textarea rows="7" id="comments" name="comments"></textarea>
<br/>
<input type="submit" name="go" id="go" value="go" />
</form>
</div>

PHP:
<?php

//Created new database connection
$connect = new MySQLi ('localhost', 'root', '', 'my_db');
//Inseting data into the Commnets table
$query = "INSERT into COMMENTS (name, email, comments) VALUES (?, ?, ?)";

//Initialises the connection
$stmt = $connect->stmt_init();
//Creating a prepated statement
if ($stmt->prepare($query)) {

//BINDS php variable to corresponding place holder
$stmt->bind_param('sss', $_POST['name'], $_POST['email'], $_POST['comments']);
$stmt->execute();
}
//If INSERT is successful
if ($stmt) {
echo "Thanks! We will be in touch shortly";
}
//IF INSERT is not successful
else {
echo "There was a problem. Try again later";
}

?>

SCRIPT:

$(function() {

$('#go').click(function() {
$('#formcontainer').append('<img src="images/ajax-loader.gif" alt="Loading" id="loader"/>');

var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();

$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,

success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});

}
});

return false;
});

});

Newb question - simple jquery image swapper in WP
[1Reply]
- 28-Sep-2011 03:14 AM
- Forum: Using jQuery
Hi all,

This is a newb questions but I wrote a simple script that animates one image to drop down to reveal another. It works fine when I have it on its own page but when I try and put the code into a wordpress page it no longer works. The image appears but theres no animation.

My code looks like:

HTML:

<div class="imageswapwrap">
<img src="http://localhost/wpeido/wp-content/uploads/2011/09/image1.jpg" />
<img src="http://localhost/wpeido/wp-content/uploads/2011/09/image2.jpg" class="frontimage" />
</div>

CSS:

.imageswapwrap img {
position:absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 5px solid #333;
}

.imageswapwrap {
position:relative;
float:left;
overflow:hidden;
width: 250px;
height: 200px;
}

JQUERY:

$(function(){
$('.imageswapwrap').hover(function() {
$(this).children('.frontimage').stop().animate({"top" : "300px"}, 700);
}, function(){
$(this).children('.frontimage').stop().animate({"top" : "0px"}, 400);
});
});

The Jquery is on its own file and the header links off to it like this:
<script language="JavaScript" SRC="<?php echo bloginfo('template_directory') ?>scripts/jQuery-1.6.3.pack.js"></script>
<script src="<?php echo bloginfo('template_directory') ?>scripts/imageswapscript.js" type="text/javascript"></script>

Can anyone help me understand why its not working?

Thanks heaps!

Page loads slow when I link to external .js file
[1Reply]
- 18-Sep-2011 02:49 AM
- Forum: Getting Started
Hi guys,

This is a weird one. I am new to jQuery so have been following a tute online. My script works, its just takes ages to load - up to a minute! Things were working fine before when the script was on the same page as the HTML but when I put it on its own file it just slows right down. All these files are just operating straight from my local.

All I am doing is changing the color of a list (ul) with jQuery on an external .js file.

This is the only code on that .js file (called script.js)

$(function () {
$('#list1 li').addClass('alert');
});

And this is the code on my HTML file:

<script language="JavaScript" SRC="jQuery-1.6.3.pack.js"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>

<body>

<ul id="list1">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>

There is an external css of course that just has:

.alert {
color:#F00;
}

Anyone know why it would be working so slow?

Thanks!

New to jquery - please help
[3Replies]
- 06-Jul-2010 02:52 AM
- Forum: Getting Started
Ok so Im pretty new to jquery. I was wondering if someone could tell me what im doing wrong with this simple drop down menu code:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#nav a').onmouseover(function() {
        $('#nav .subMenu').show('2000');
        });

        $('#nav a').onmouseout(function() {
        $('#nav .subMenu').hide('2000');
        });
</script>

<div id="nav">
    <ul>
        <li><a href="index.html"><img src="images/homeBtn.gif" alt="Home"/></a>
            <div class="subMenu">Return to the home page.</div></li>
        <li><a href="index.html"><img src="images/aboutBtn.gif" alt="Home"/></a></li>

ETC...

CSS:

.subMenu {
        background-color:#00FF00;
        width:50px;
        height:50px;
        display:none;
    }

The only thing I can think of that different is those script tags are not in the header - which i didnt think was necessary (or is it?)

Cheers

Response title

Attachments

jQuery Forum

Activity Trend