JQuery :: Using SlideToggle Function With Dynamic Content?
Apr 6, 2010
I am relatively new in the jquery world. I am loading some dynamic content for a news, and onClick at the a-tag "test" there's a slideToggle for news_text. My Problem is, that I am loading some content, and got more newsEntrys. How can I go through all the news with the same function?
<!--Hier beginnt ein Newseintrag-->
<c:forEach var="n" items="${news}" varStatus="MyStatus">
<c:if test="${MyStatus.count<'4'}">
<div class="news">
<div class="news_headline">
<h2>${n.newsDatum}</h2>
<a id="test" class="contentlinks">
${n.newsTitel}
</a>
</div><!--news_headline-->
<p class="news_text">
${n.newsText}
</p><script type=javascript>
$(function(){
$('a.contentlinks').click(function() {
$(this).next("div.news_text").slideToggle("fast");
});
});
</script>
</div><!--class news closed-->
</c:if>
</c:forEach>
<!--Hier endet ein Newseintrag-->
View 9 Replies
ADVERTISEMENT
Nov 23, 2010
IE7 / IE8 scroll bar is not recalculating content height, when using .slideToggle(); so content panels when expanded are lost off the bottom of the page - see screenshot. Has anyone else had this problem? What is the fix? I have tested in Chrome, firefox, opera (it even works in IE6) just not IE 7 and 8. I have attached a screenshot. The weird thing is the slider I am using for the areas causing the problem (pictured) I am using because they allow multiple instances of the slider on the page.
There is also an old one on the page also that does work in IE7 & 8 (the page expands as if there was new content in the page).
[Code]...
View 2 Replies
View Related
May 11, 2009
Recently I've been using a .slideToggle script to show big images when thumbnails are clicked.
However, the <div> that is revealed does not Toggle Up when multiple thumbs are clicked, so I'm left with a bunch of open <div>s on the page.
I'm not sure what to do -- I think it has something to do with the siblings of the class "largeexamples" but I'm not sure. I've also been reading about eq, but I'm not there yet.
live:
Code:
View 4 Replies
View Related
Oct 12, 2010
I am doing a simple slidetoggle with a click function. Meaning I am basically sliding a div (content) into nothing with another div (button) using a click event. This works all fine and dandy but now here is the problem.. I want to change the class of the div(button) so that I may show a different background image depending on the state of the open or closed content div.
Here is the code so far...
$(document).ready(function() {
$('.Button').click(function() {
$('.Content').slideToggle('normal');
if($(this).next().is(':hidden') == false) {
$(this).addClass('off');
alert ('You should see See More button.');
}});
Then obviously I have CSS that has the classes I need including an "on" class that I could not get to fire.
View 4 Replies
View Related
May 26, 2010
I work on a website and the client wants jQuery on the menu. When a user clicks on "webdesign" link menu a shadow goes down with some text on it(you can try it).Right now when I click on that webdesign menu link, the other one "ipone apps" goes down too, but the owner doesn't like this. He likes that shadow, but he doesn't want to see that other menu link to be moved when he clicks on other menu link.
View 3 Replies
View Related
Sep 16, 2010
I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial. For your Copying/Pasting pleasure :rolleyes:, here's an example button for which I'd include the onclick():
<button type="button" >Add</button>
And here's an example SELECT menu:
<select id="idNumber" name="weekday_1['workPeriod_new'][] >
<option value="1" >one</option>
<option value="2" >2</option>
</select>
View 10 Replies
View Related
Jan 7, 2011
I have a table that Im hiding during the initial load that has a considerable amount of data. (I dont design'em, I just code 'em).
During the .show, .hide ... functions I would like to display a please wait msg. But I cant seem to find a way to do an async function. As the callback functions only deal with sync ...(I think)
View 1 Replies
View Related
Jan 5, 2012
I have a div that is filled with content dynamically and is fixed so it will always be in the same place even when you scroll. I need scrollbars to appear when the div is has too much content and goes beyond the screenborder.
View 1 Replies
View Related
Nov 22, 2010
I have previously developed two scripts, both of which work really well, however I want to amalgimate them together if possible? My first script loads the content specified into a single div, replacing the content depending on which function is called, it also displays a loading gif during a timeout of 2 seconds. Here is the page:
[Code]...
View 1 Replies
View Related
Oct 18, 2011
I am new to jQuery and not an experienced programmer. I downloaded the accordion widget and it works fine. I have one small problem: the content box instances 2 and3 onwards, seem to be sizing themselves depthwise to the size of the first content box and not dynamically to the number of lines of text I enter in each. Can I make it dynamic with alterations to the CSS? If so whichproperty do I alter and to what?
View 1 Replies
View Related
Oct 31, 2009
I'm attempting to print a column of links received via AJAX request with an accompanying simple hover effect, however I can not get the hover effect to apply to the dynamic content. I've tried a few different ways of accomplishing this, none of which have worked so far. The most recent is posted below.
The call to imgUpdate.php in the following code snip returns content like:
<a class='storyImage' href='http://link.com/dev/?p=50'><img src='http://link.com/img1.JPG'/></a><br />
<a class='storyImage' href='http://link.com/dev/?p=47'><img src='http://link.com/img2.JPG'/></a><br />
[Code].....
View 1 Replies
View Related
Jul 14, 2011
I am using jquery.autoheight.js [URL] to adjust the height of the iframe according to content.
It works fine for the static content while loading. If I try to use the content with expand/collapse or display some content dynamically, its not adjusting according to the new content.
View 4 Replies
View Related
Jul 13, 2011
I have a div with a dynamic ID and content based on a database.I want to replace that ID's content with some content with I collect from the database via PHP.The new content may contain <br />'s.
View 1 Replies
View Related
May 3, 2010
Okay I have a blank html page with the following in the head:
$(document).ready(function () {
$.ajax({
url: 'include.html',
success: function(data){
[Code]....
My question is why isn't this working? that it's probablybecauseit's been loaded dynamically andif ($('#load').length) is not checking dynamic content - but how would Iamendthe if statement to also check dynamic content?
View 2 Replies
View Related
Sep 28, 2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
View 2 Replies
View Related
May 17, 2011
I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page.The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section.
Javascript file: scripts.js
client.php ----> loads data from: display_client.php
display_client.php ----> loads data from: display_brand.php
[code]...
View 5 Replies
View Related
May 31, 2011
I'm trying to make an accordion structure, load dinamically content. This what i done, and that's work, but now i need to improve it.
Here the css
<style>
.project { display:none; }
</style>
<div id="project-box">
[Code].....
View 2 Replies
View Related
Jan 4, 2011
I have been using YUI for the past 5 years and have begun to explore jQuery. One essential thing that I use is the YUI Dispatch plugin that allows for dynamic execution of ajax response content (i.e. js & css injection). Does jQuery or any of it's related plugins offer similar functionality to the YUI Dispatch plugin? Here is the link the the yui dispatcher for reference: [URL]
View 2 Replies
View Related
Feb 9, 2011
I have jQuery loading content from an aspx page - however, once this is loaded, jQuery doesn't appear to "see" the content. For example, in the code below, I am retrieving a table, with the class "stripeme" from the aspx page - I then try to add the mouseover/alternate row scripts, but my table does not change.
My main page is:
(page head info removed for length)
<script type="text/javascript">
function showDetails() {
var div = $("#divResult");
div.slideUp(function () {
div.load("getContent.aspx", .....
Should I add dynamic content, that I then want to manipulate using jQuery, in some other way?
View 1 Replies
View Related
Oct 31, 2010
I am echoing some dynamic content into a DIV based on form entries. The content is essentially a dynamic table, with results populated based on the user input. The user can further refine the database results by entering more data into other fields. All of this works fine. What I'd like to add is the ability to click on an <a> tag header on each column to sort by that column. I haven't gotten it to work, so I wanted to try a more simple test. I currently echo <a id='test' href='#'>Click Me</a> into the DIV set aside for AJAX response. I then setup a jquery .click() event monitor to simply alert me when I click on it. If I place this <a> tag in the main portion of the content that is static, I get the alert box. But when I put this into the content of the DIV tag generated dynamically by AJAX, it doesn't fire the alert. Is there something I need to do to 'reload' the page? Is the dynamically added content not part of the document since the entire page isn't reloaded?
View 1 Replies
View Related
Jun 14, 2009
Dynamically loaded content (via JQuery's get method, for instance) seems unable to connect to a stylesheet that resides on the main page. I understand this is due to the fact that the dynamic content is not part of the DOM.
View 1 Replies
View Related
Nov 8, 2010
The original question was: does anybody know how to load a specific content and not an entire web page when using the jQuery.get below?
$.get('filename.html', function(data) {
$('.class_name').html(data);
});
and was given this code to use/try:
$.get('filename.html', function(data) {
$('.class_name',data).html(); //returns the HTML of .class_name inside of filename.html
});
but it didn't quite work. It loads the entire web page into the defined class name rather than loading a specific content (Look below for further understanding)The filename.html which has content tag names like "[Copyright Year] that goes in the footer position of the site gets dynamically generated.I've created another static page help.html that has pretty much the same content overall except the dynamic content won't get loaded with the content tag (the system doesn't allow static pages to load them). This is what brought me to this solution. So now that I've added a class name to the indicated class that I want to load it pulls all the content and styling of the site rather than just the dynamically generated content of (filename.html) .
<div class="adp_footer">[Copyright Footer]</div> <---- Doesn't get loaded when I used any of the above mention jquery strings,
View 3 Replies
View Related
Oct 13, 2011
I've built this webpage : [URL]. Now, I want the slideshows (Jquery Cycle) to have a pager to navigate the images instead of previous and next [URL].
My code looks like this :
function ajaxpage(url, containerid) {
var $container= $('#' + containerid);
$container.hide().load(url, function() {
$container.fadeIn();
$('.slideshow')
.cycle({
next: '#next2',
prev: '#prev2',
fx: 'blindX', speed:'1500',
timeout: 0, .....
after: function() {
var alt = $(this).attr('alt');
// do something with alt text
$('#someElement').html(alt);
}});
});}
The code I need to implement looks like this :
$
('#slideshow'
).before('<ulid="nav">'
).cycle({fx:'turnDown'
,speed:'fast'
,timeout:0
,pager:'#nav'
,//callbackfnthatcreatesathumbnailtouseaspageranchor
pagerAnchorBuilder:function
(idx,slide){return
'<li><ahref="#"><imgsrc="'
+slide.src+'"width="50"height="50"/></a></li>'
;}});
How to do this successfully?
View 2 Replies
View Related
Sep 6, 2011
I will like to know if there is anyway to view all the rules that I have currently in the Jquery validation plugin. Currently, I am trying to add in rules dynamically through the rules(add) function after adding some dynamic fields through the user inputs. the rules are added in this manner.
[Code]...
View 2 Replies
View Related
May 29, 2009
I am trying to create portlets that dynamically load their content (usinq jQuery). My first approach was to leave the header + footer + decorations of the portlet OUTSIDE of the dynamically loadable content. It worked just fine but I had to abandon that approach so that I could use the same code both for statically- and dynamically-loaded content (e.g. when no AJAX support was available). So far so good.
Now to my problem: I use the following code for loading my dynamic content
The loading works fine, but after the dynamic content has been loaded I can not seem to get access to it using jQuery!
Short description: Line 3 clears the content (I know! There are better solutions!) Line 4 loads the content Line 6 dumps the data on the console; this is for debuging only, so that I can establish that the correct content is loaded
After the data is properly loaded I did expect to be able to find it by traversing the DOM tree in traditional jQuery fashion (like in Line 10). However, dumping the contents of the 'tag' shows it containing no content at all; it is empty even though the browser renders the expected new result. I thought: Well! The browser holds two copies of the DOM tree; one that is the original page and one that is the modified content used for rendering". Therefore I attempted to manipulate the loaded content within the function (Line 8). The content is visible there, that I have established in Line 6. But I do not know how to access it jQuery-style.
(Why am I trying to modify the loaded content? I want to inject a title row with various decorations and clickable content.)
View 2 Replies
View Related
Jul 14, 2010
i'm using URL... to load and preview music on my page.It all works really well, when you write pure static html code with just [code]And it will automaticly transform that url into a working custom-player. Done with the soundcloud api.But when i use $.getJSON and dynamicly get down a list of urls that i try to insert with:[code]*side-note(it's the same result with $('#addbtn').click, just wanted to try live as i hoped it would update the elements upon being added. But did not work out.)The url gets inserted into sc-player class div, but the rest never gets transformed into the custom-player with the sc-player.js script.It just remains an ordinary a href. It is as if the sc-player.js never is being "loaded" which i can understand why it won't. Question is how do i get it to successfully transform my urls that are being dynamicly added with javascript into the custom-player instead of just the url to the song?
View 2 Replies
View Related