We Keep Coding

Apply scrollIntoView function in to JQuery function

I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.

The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];

How can I reset the contents of a div generated by jQuery?

I am using the Onsen UI framework with jQuery and my HTML is like this in its initial state?:
<ons-scroller id="category-list">
</ons-scroller>
Then I have a function that populates this div:
function createElement(elementId,elementvalue)
{
var content = document.getElementById(elementId);
content.innerHTML=elementvalue;
ons.compile(content);
}
which is then called in the code as:
if (data.has_menu_category==2){
var htm='';
htm+='<ons-list>';
$.each( data.menu_category, function( key, val ) {
htm+='<ons-list-item modifier="tappable" class="row" onclick="loadmenu('+
val.cat_id+','+val.merchant_id+');">'+val.category_name+' <span style="float:right;">'+val.items_count+'</span></ons-list-item>';
});
htm+='</ons-list>';
createElement('category-list',htm);
}
The category-list is then populated with items. I cannot figure out however how to RESET that list back to initial state. Basically back to
<ons-scroller id="category-list">
</ons-scroller>
How can I do that?

You can simply set the html to an empty string.
jQuery way:
$('#category-list').html('');
core javascript way:
document.getElementById('category-list').innerHTML = '';

dynamically populate into navigation bar from javascript

This is my jquery mobile page header section i want to populate my dynamically populated data from javascript to navigation bar in this code.
<div data-role="page" data-theme="a" id="homePage" >
<div data-theme="a" data-role="header" data-position="fixed">
<h3 class="mblHeading">Client</h3>
<a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
<div data-role="navbar" >
<ul id="navid">
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
My java script code for dynamically populating the content.Here querytableid is navid.navigationList is an array
function populateQueryList4(queryTableID)
{
var listParent = jq(queryTableID);
listEntry = document.createElement("LI");
aNode = document.createElement("A");
aNode.innerHTML=navigationList[k-1];
listEntry.appendChild(aNode);
aNode.onclick = function() {
//displayArtifactContent(artifactAreaInfoMap[wiTitle]);
};
listParent.append(listEntry);
jq("#navid").navbar('refresh');
}

Unfortunately you cant populate navbar just like that. Functions navbar() and navbar('refresh') are not going to help you here, not trigger('create') or trigger('pagecreate'). For some reason, when you dynamically add additional navbar item it will not be styled as it should and this is an error.
There are 2 alternative ways how it can be done.
Dynamically populate navbar during the pagecreate or pagebeforecreate page venet.
Basically during those 2 events page is style not styled according to jQuery Mobile styles. So any added content at this point will be enhanced automatically.
Here's a working jsFiddle example for you: http://jsfiddle.net/Gajotres/SJG8W/
$(document).on('pagebeforecreate', '#index', function(){
$('[data-role="navbar"]').html('<ul>' +
'<li>By Brand</li>' +
'<li>By Flavor</li>' +
'<li>Zero Nicotine</li>' +
'</ul>');
});
Manually enhance dynamically added navbar items
Other solution is to do it by yourself. It is not complicated as you will see in a working example: http://jsfiddle.net/Gajotres/V6nHp/
$('#index').live('pagebeforeshow',function(e,data){
navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});
var navbarHandler = {
addNewNavBarElement:function(navBarID, newElementID, newElementText) {
var navbar = $("#" + navBarID);
var li = $("<li></li>");
var a = $("<a></a>");
a.attr("id", newElementID).text(newElementText);
li.append(a);
navbar = navbarHandler.clearNavBarStyle(navbar);
navbar.navbar("destroy");
li.appendTo($("#" + navBarID + " ul"));
navbar.navbar();
},
clearNavBarStyle:function(navbar){
navbar.find("*").andSelf().each(function(){
$(this).removeClass(function(i, cn){
var matches = cn.match (/ui-[\w\-]+/g) || [];
return (matches.join (' '));
});
if ($(this).attr("class") == "") {
$(this).removeAttr("class");
}
});
return navbar;
}
}
Comments
As you can see for this method to work you must understand how jQuery Mobile page events work, to find out more take a look at my other answer: jQuery Mobile: document ready vs page events.
Also take a look at my other answer regarding enhancement of jQuery Mobile pages markup: jQuery Mobile: Markup Enhancement of dynamically added content

Swipe JS not working with populated content

I'm using Swipe JS 2.
If I make the HTML structure myself, it works perfectly, but if I populate the HTML with content coming from the jQuery, it stops on the second slide.
My HTML structure:
<div id="map" class="swipe">
<div class="swipe-wrap">
<div class="city" id="current">
<div class="location">Current Location</div>
</div>
</div>
</div>
<nav>
<ul id="position">
<li class="on">Current location</li>
</ul>
</nav>
This is my structure on the jQuery.
$.getJSON("http://localhost/locations.php", function(localdata) {
$.each(localdata.locations, function(i, geolocal){
var vcountry = geolocal['country'];
var vregion = geolocal['region'];
var vcity = geolocal['city'];
country = vcountry.replace(' ','_');
region = vregion.replace(' ','_');
city = vcity.replace(' ','_');
// THE PROBLEM IS HERE. IF I USE AJAX OR GETJSON HERE INSIDE THE OTHER GETJSON, THE SWIPE IS BROKEN.
$.ajax({
type: "GET",
url: "http://localhost/remotexml.php?url=http://www.yr.no/place/"+ country +"/"+ region +"/"+ city +"/forecast.xml",
success: function(xml) {
var localName = $(xml).find('location name').text();
$('#map div.swipe-wrap .city:last-child').after('\n<div class="city">\n<div class="location">'+localName+'</div>\n</div>\n</div>');
$('#position').append('\n<li>'+localName+'</li>');
}
});
});
})
.success(function() { })
.error(function() { })
.complete(function() {
var slider =
Swipe(document.getElementById('map'), {
auto: 5000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
});
What happens is: when I see the HTML created by the jQuery, is perfect. jQuery is creating the divs inside the slider and the lis inside the list. Perfect. When I run the website, load and starts perfectly, but then, when changes slide, stops on the second slide, and the second slide is blank. Nothing there. Even thought there is content on the HTML.
The most weird part? If I start the Developer Tools (Command + Alt + I on Chrome), right after the website loads, it WORKS PERFECTLY. What kind of bizar behavior is this? :D
Anybody can help me to make this Swipe JS to run?

If you're populating the slider with content via an AJAX request, then you will most likely have to wait until that AJAX request is finished before you build the slider - i.e. in the success callback of your AJAX function.

Creating a Drop Down Menu That Changes Page Content Using Show/Hide Layers and Z-Index

I am trying to create a sidebar for a site that will allow a user to select an item from a drop down menu and show an RSS Feed. The feed will change depending on which item is selected from the list. I am not sure how to acomplish this, but my first thought was to use z-index and show/hide layers. I have one layer and the menu set up, but it will not allow me to change the feed displayed when a different menu item is selected. Does anyone know how I can acomplish this?
I have a live preview up of what I have gotten done so far. It's located on the site, CHUD,

This uses jQuery and jFeed plugin to replace the contents of a DIV based on a dropdown selection.
// load first feed on document load
$(document).ready(
function() {
load_feed( $('select#feedSelect')[0], 'feedDiv' ) ); // pick first
}
);
function load_feed( ctl, contentArea ) // load based on select
{
var content = $('#' + contentArea )[0]; //pick first
content.html( 'Loading feed, please wait...' );
var feedUrl = ctl.options[ctl.selectedIndex].value;
$.getFeed( { url: feedUrl,
function(feed) {
content.html( '' );
content.append( '<h1>' + feed.title + '</h1>' );
feed.items.each(
function(i,item) {
content.append( '<h2><a href="'
+ item.link
+ '">'
+ feed.title
+ '</a></h2>' );
content.append( '<p>' + feed.description + '</p>' );
}
);
}
});
}
HTML
<div>
<select id=feedSelect onchange="load_feed(this,'feedDiv');" >
<option value='url-to-first-feed' text='First Feed' selected=true />
<option value='url-to-second-feed' text='Second Feed' />
...
</select>
<div id='feedDiv'>
</div>
</div>

It's not exactly the same thing, but this uses simple CSS and HTML and no Javascript needed.
A bit of reverse engineering can go a long way.
Image_switcher
it's in dutch, but it's simple: move your mouse over the <a> parts and the image switches.
Pure CSS+HTML, no Javascript

you have two options:
pre-load all the rss feeds (i'm assuming your <ul>'s in your example page are the HTML output of your RSS feeds?), hide them all when your document loads, and then reveal them as selected
use AJAX to dynamically grab the selected feed information as your select box changes.
here's a quick example of a javascript and jQuery version of doing the former:
html:
<select id="showRss">
<option name="feed1">Feed 1</option>
<option name="feed2">Feed 2</option>
</select>
<div id="rssContainer">
<ul id="feed1">
<li>feed item 1</li>
<li>...</li>
</ul>
<ul id="feed2">
<li>feed item 2</li>
<li>...</li>
</ul>
<!-- etc... -->
</div>
javascript:
var rss = document.getElementById('rssContainer'); // main container
var nodes = rss.getElementsByTagName('ul'); // collection of ul nodes
var select = document.getElementById('showRss'); // your select box
function hideAll() { // hide all ul's
for (i = 0; i < nodes.length; ++i) {
nodes[i].style.display = 'none';
}
}
select.onchange = function() { // use the 'name' of each
hideAll(); // option as the id of the ul
var e = this[this.selectedIndex].getAttribute('name');
var show = document.getElementById(e); // to show when selected
show.style.display = 'block';
}
hideAll();
jQuery:
$('#showRss').change(function() {
$('#rssContainer ul').hide('slow'); // added a bit of animation
var e = '#' + $(':selected', $(this)).attr('name');
$(e).show('slow'); // while we change the feed
});
$('#rssContainer ul').hide();
to do option 2, your onchange function would handle the AJAX loading. if you're not that familiar with AJAX, and have a few feeds, option 1 is probably the easiest. (again, i'm assuming you have already parsed out your RSS as HTML, as that's another topic altogether).