Can any one tell me how can i implement a auto slider/scroller in my web page. The slider should show dynamic data from a database. (Ex : Hot jobs tab in the plipl.com site's home page (www.plipl.com) . Is there any easy way to do this with jQuery ?
The following is nothing special, just quickly tried it. There's 2 div's that it continously switches between, hopefully give you a head start. You could use the same idea and load content into div's via AJAX.
Code snippet:
css:
div{width:100px;height:100px;}
#container{overflow:hidden;border:1px solid black;}
#left{background:red;float:left;}
#right{background:green;float:right;}
jScript:
$(function() {
//Call scrollContent function every 3secs
var timerUp = setInterval(scrollContent, 3000);
function scrollContent(){
//Toggle top between 100 and 0
var top = $("#container").scrollTop() == 0 ? 100 : 0;
$("#container").scrollTop(top);
}
});
markup:
<div id="container">
<div id="left">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div id="right">
<ul>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
</ul>
</div>
</div>
yes. this is easy.
grab your data from the database. lets say its a list of HotJob objects, each object containing some String fields. Convert each object to a JSON object (which is a hash). Make a list of these JSON objects. use your web framework X to print out the JSON.
Use jquery's getJSON to grab the JSON object. Iterate over each HotJob and write out the information.
Google for "jquery json scroller" and find something that supports JSON out of the box. this does:
http://www.logicbox.net/jquery/simplyscroll/flickr.html
sure, its images, but you can modify it to support text.
jCarousel is a jQuery carousel plugin that supports dynamic content. Although there are no JSON-driven examples on his website, it is easy enough to implement using jQuery's default AJAX functionality.
This is the most robust and customizable carousel I have found thus far for jQuery.
Or if you don't want to use plugins you could use jQuery's AJAX functionality to load in the data, have a div with overflow:hidden and populate it with the data loaded in, only showing a section at a time.
You could then use the setInterval() function to change the $("#container").scrollTop(xx) to move the next set of information into view at a set interval. You could scroll it in or have it popup suddenly, up to you but fairly easy using jQuery.
Related
I made a navigation bar as tabs in my website, and I used the onlink identity to specify the current tab with certain characteristics. My problem is that when I change tabs, I don't know how to make the previous tab id set as none and the current one set as onlink.
Here's the navigation bar code:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>
There's a simple ways but it's somehow stupid, which is to make each current tab as a whole page and when I click another tab, it's just given the url of clicked tab which goes to the page with specified onlink id, but this requires reloading the whole page that's why I'm seeking a better solution.
You can get the control being clicked by passing this in javascript method
onclick="DisplayDIV('IndPage', this);
function DisplayDIV(IndPage, sourceObj)
{
alert(sourceObj.id);
}
Are you ok do use the jQuery Library?
If so you can avoid putting inline javascript into your html and use toggleClass http://api.jquery.com/toggleClass/
You are trying to use HTML ids in the wrong way.
Ids are unique identifiers for HTML tags. They should not change at runtime.
Instead, apply CSS classes to the tab you want to be visible.
CSS
.hide {display:none;}
Javascript
var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
indpage.classList.add("hide");
}
Then your HTML at runtime will change to
<div id="IndPage" class="hide">...</div>
This is the standard approach.
And you can do much more with this idea.
I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.
Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript
Here is a jquery way to do it: http://jsfiddle.net/surendraVsingh/HyAhL/
$('#indHolder a').click(function(){
$(this).attr('id', 'onlink');
$(this).parent().siblings().find('a').removeAttr('id');
});
I took hints from the answers above and it worked as the following:
function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}
and the tabs code is:
<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
</ul>
</div>
</div>
I just wanna not that in the second link I had to change the id of the first link twice because it didn't work once, maybe cause its id is set in the tag not just when clicked.
I am struggling to get JQM to reinitialize a jquery page with a listview that contains form fields.
One of the form elements is initialized as part of JQM's normal initialization process, that is displaying correctly with all the correct class applied to all elements.
The others are all added dynamically using JQ's append
When elements are added dynamically I cannot find the correct method to reinitialize the list to apply the styling to everything, the fieldcontain div the label & the textarea.
I have prepared an example to show the different methods to reinitialize the elements that I've tried based on other questions found on SO and around the web.
http://jsfiddle.net/robaldred/UPsQr/
In my example, row 5 is correctly initialize, however it requires calling the fieldcontain() method the textinput() method and manually add the ui-input-label class to the label. This feels like a lot of messing about, I must be missing something.
Trigger a create event on the page like this:
$("#page").trigger("create");
Create vs. refresh: An important distinction
Note that there is an
important difference between the create event and refresh method that
some widgets have. The create event is suited for enhancing raw markup
that contains one or more widgets. The refresh method should be used
on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
Referenece: http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
Updated your fiddle - http://jsfiddle.net/UPsQr/2/
Working Example:
http://jsfiddle.net/UPsQr/4/
JS
$('#add_element').click(function() {
var list = $('ul[data-role="listview"]');
var nextLi = ((list.children().length) + 1);
li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
list.append(li);
list.listview('refresh');
$('#page').trigger('create');
});
//$('#add_element').hide();
HTML
<html>
<head>
</head>
<body>
<div id="page" data-role="page">
<!-- First field is done by jQM's normal initialization -->
<!-- The Rest are added onload and appended to the listview -->
<ul data-role="listview">
<li>
<div data-role="fieldcontain">
<label for="textarea1">Input:</label>
<textarea id="textarea1" name="textarea1"></textarea>
</div>
</li>
</ul>
<a data-role="button" id="add_element">Add Fields</a>
</div>
</body>
</html>
NOTE:
jQM Supports jQuery 1.6.4
I am aware of the basics of using the HTML5 localStorage using the localStorage.getItem/setItem.
But I am trying to understand how to implement the same on my dynamic page. So here is the scenario:
I have a dynamic page (myPage.jsp) which on initial load calls a Java method (that outputs the HTML string) as below;
<div id="mainContainer">
<div id="parent1"><span>Parent 1</span></div><ul id="child1"></ul>
<div id="parent2"><span>Parent 2</span></div><ul id="child2"></ul>
<div id="parent3"><span>Parent 3</span></div><ul id="child3"></ul>
</div>
Here the number of parent div's are dyanamic based on some logic.
Now on click on any of the parent divs, a Java method is called again (that again outputs the HTML string) for the child innerHTML.
The HTML returned (on click of say Parent 2) is as follows;
<li class="listEle">Child content 1</li>
<li class="listEle">Child content 2</li>
Here the number of "li" elements are dynamic for each parent.
Actually the above HTML is just appended to the mainContainer....So the overall HTML code looks like
<div id="mainContainer">
<div id="parent1"><span>Parent 1</span></div><ul id="child1"></ul>
<div id="parent2"><span>Parent 2</span></div><ul id="child2"><li class="childLi">Child content 1</li><li class="childLi">Child content 2</li></ul>
<div id="parent3"><span>Parent 3</span></div><ul id="child3"></ul>
</div>
Now my question is I want to use localStorage for 2 things:
Storing the initial HTML code (mainContainer) without any child content; AND
Storing the child HTML code as well (which is within the mainContainer)
I am looking at the various ways in which I can do this. I am open to all ideas that you can think of. Just need to consider that all things are dynamic (number of parent divs/child li's, etc)...So need to know how I can handle that dynamic content.
You can store anything you like in localStorage provided the item stored is turned into a string, no problem in your case, and the total storage doesn't exceed 5Mb per site.
You approach could something like this.
When the page loads (use jQuery) check if the base HTML template is there
If not use jQuery to load it and store it in localStorage
use a jQuery selector to select the appropriate element in the current page. This could be the element. And use $(...).html(stored html template); to display the base html.
If you need to insert dynamic values use something like John Resig MicroTemplating to insert variables.
i have a menu bar with links which are in the header. when you click the link, i want to just change the content in the main div. i'm thinking of doing it in php, but you will have to reload the page. So i need to do it in javascript, but i dont know javascript.
here is my menu code in the header div:
<ul id="nav">
<li>Enter Information</li>
<li>View Records</li>
<li>View Upcoming</li>
</ul>
If you think about using PHP, I guess that you have to load dynamic content. For this, I advice you to use AJAX
The easiest is to use a framework, like the famous Jquery. Example here
here i am assuming that you get your content with a function call as content()
var list=document.getElementById('nav');
var links=list.getElementsByTagName('a');
var header=document.getElementById('header');
for (var i=0;i<links.length;i++)
{
links[i].onclick=function() {
header.innerHTML=content(); //here you can use something else to generate the content
}
}
You want to use jquery to build something like this. If you are serious about building web apps you need to learn how to use it (or a similiar framework like MooTools)
For this particular problem I would use an existing menuing system, here's the first list of jquery based menus that I found, but there are many more.
You don't need any anchor elements. W3 example
<script>
$(document).ready(function() {
$('.menu').click(function() {
$("div").load('somecontent.txt');
});
});
</script>
<ul>
<li class="menu">Enter Information</li>
<li class="menu">View Records</li>
<li class="menu">View Upcoming</li>
</ul>
Depending on the type of content, you have a few options available to you. If you need to load a new page into the main content, you can use iframes and some javascript. If you need to load simple text, you can simply use javascript.
Based on your feedback, you'll do something like this (note- I'm shooting from the hip regarding syntax, but this is generally what your code will need to look like):
Link 1
<iframe id="MainContent">
</iframe>
<script>
function UpdateIFrame( newPageAddress ){
document.getElementById("MainContent").contentWindow.location = newPageAddress;
}
</script>
In order to dynamicly load content (e.g. from a server using php/sql) without having to reload the website Ajax is exactly what you need.
Inlineframes (mentioned before), however, should not be used for they are deprecated.
W3schools provides a very basic but straightforward tutorial on Ajax.
This question already has an answer here:
How to remember last state with Jquery?
(1 answer)
Closed 7 years ago.
I have a nested ul/li list
<ul>
<li>first</li>
<li>second
<ul>
<li>Third</li>
</ul>
</li>
... and so on
I found this JQuery on the interweb to use as inspiration, but how to keep the one item i expanded open after the page has reloaded?
<script type="text/javascript">
$(document).ready(function() {
$('div#sideNav li li > ul').hide(); //hide all nested ul's
$('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded'); //show the ul if it has a current link in it (current page/section should be shown expanded)
$('div#sideNav li:has(ul)').addClass('accordion'); //so we can style plus/minus icons
$('div#sideNav li:has(ul) > a').click(function() {
$(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
$(this).next('ul').slideToggle('fast');
$(this).parent().siblings('li').children('ul:visible').slideUp('fast')
.parent('li').find('a').removeClass('accordionExpanded');
return true;
});
});
</script>
you can save the current open menu item in a cookie $.cookie('menustate')
similar: How to remember last state with Jquery?
The same way you manage state when passing data from page to page:
Querystring
Cookies
Form post / hidden field
Ajax to and from the server
I'll assume you dont like any of the previous answers since none of them have been accepted and present you with a less "correct" way of doing it. Before I get flamed to death, this is just my attempt at doing it with pure js/jq. You could parse out the URL (http://example/subsite) and select whichever piece is relevant (for the sake of ease, lets assume /subsite is what you want).
$(document).ready(function(){
var pathname = window.location.pathname;
var splitpath = pathname.split("/");
$("#nav-" + splitpath[1] + "").children().class('current')
});
Build your ID's into something like <li id=nav-subsite> and use the parsed out URL to build a selector for the correct tab/li/whatever. Is it weird? Sure, but I figured I'd throw in my $.02
This is not easily doable in JavaScript alone.
Either the server sets the accordionExpanded CSS class correctly when the page is reloaded (directly into the source HTML). This would require the server knows what <li>s the user had clicked on, naturally.
Or you avoid reloading the page at all and do partial page updates through AJAX calls. This is what most "modern" websites do.
Or you do what Glennular suggests and save state info to a cookie.
Your choice.
I'm not sure what your menu is supposed to be doing exactly, but if it's a nav menu, you could add a brief bit of markup to your body element for each base page:
<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->
And have jQuery look for this marker and make a decision on how to handle the list tree once the page loads based on which page it is. It wouldn't require setting any cookies, and so long as they have JS enabled (which every user should at this point), everything's kosh magosh.