I have a site that has a long form. There are some other parts to the site that need to change without resetting that form. I was planning on using an iframe to load the other parts of the page.
A sidebar on the page works as navigation. I would like the links in the sidebar to change the urls that the iframes point to, and change the actual url bar. But not reset/reload any of the other iframes.
Thanks
P.S: I am a complete newbie at JavaScript so full examples would help.
here is some of my code:
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
The idea is that the list in the sidebar has all the different usernames, and whichever username you click on, it will load the corresponding page. The only part of the url that needs to change is the part after ?user=
Here is a simple solution that uses jQuery to pull the href from the clicked link and insert it into the target iframe's src attribute.
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
<li class="list">
Mike - Frame 1
Mike - Frame 2
</li>
<li class=list>
Joe - Frame 1
Joe - Frame 2
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sidebar a").click(function(event) {
event.preventDefault();
var targetID = $(this).attr("data-target");
$("#" + targetID).attr("src", $(this).attr("href"));
});
});
</script>
You might try playing around with history.pushState. Unfortunately browser support is going to be limited to newer versions.
This answer should give you an idea what you're up against: Modify the URL without reloading the page
I think you should use javascript for your purpose. I think this could be a solution.
<SCRIPT LANGUAGE="JavaScript">
function newLocation1(nwloc){
document.getElementById('iframe1').src = "/path/file?user="+nwloc;
}
function newLocation2(nwloc){
document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
}
</script>
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
<a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
<a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id="iframe1" src="/path/file?user=username1"></iframe>
</div>
<div id=iframediv2>
<iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>
</div>
Related
i have a webview application which loads html locally and i want to update existing data
<div id="sport">
<div class="case" id="jarak">
<a tabindex="-1"> Sport Channel </a>
<div id="hide">
<div class="scroll-area">
<ul>
<li class="scroll-nav">
<img onclick="location.href='http://xxx'; " tabindex="2" src="http://xxx" alt="xxx" class="squareBig"></img>
</li>
<li class="scroll-nav">
<img onclick="location.href='http://xxx'; " tabindex="2" src="http://xxx" alt="xxx" class="squareBig"></img>
</li>
</ul>
</div>
</div>
</div>
</div>
there you see a flexbox, i will update it regularly img url and link in [li] tag, any ideas?
thanks :)
for now i keep use webview load html totally online but i want my webview just online for change some url on my html, I hope the answer related with json.
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
Ratchet mobile framework uses a bottom button structure that looks like this:
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<img class="tab-icon" src="img/icon-messages.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-hamburger.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-settings.png">
<div class="tab-label">Label</div>
</a>
</li>
I am trying to use JS to change the active tab to which ever one is clicked. The approach I am trying to take to is the following logic.
If the page that the site is on is the same as the href link then show that link active.
<script language="JavaScript">
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$('.bar-tab li.tab-inner').click(function() {
$(".active").removeClass("active");
$(this).parent().toggleClass('active', $(this).attr('href') == sPage);
});
</script>
I don't want it to just be the last button clicked because there are other ways to navigate back to the major sections of the app and it will look weird to have a button showing active if the content they are looking at is completely unrelated.
Thanks for any help.
Take a look at emberJS
{{#link-to 'index' classNames='tab-item'}}
<span class="icon icon-list"></span>
<span class="tab-label">Oversigt</span>
{{/link-to}}
With this syntax, based on the routing the current tab is set to active
i tried to make pop up images in my responsive gallery, but it seems to me that highslide.js doesn't see the pop up images. Script source http://highslide.com/#installation I use bootstrap and Word Press. I see that images loading but can't appear. I spend much time but don't understand what I've done wrong. Any help will be greatly appreciated!
My site http://b.pusku.com/
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 thumbs_color">
<ul id="thumbs">
<li>
<a href="http://b.pusku.com/wp-content/uploads/2012/11/7.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
<li>
<a href="/">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="<?php bloginfo('template_url');?>/highslide/highslide.js"></script>
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
It may be that the hs.graphicsDir setting is wrong. Judging from the way you are inserting the template url in the path for the highslide.js file, my guess is that it should look like this:
hs.graphicsDir = '<?php bloginfo('template_url');?>/highslide/graphics/';
If that doesn't work, there's a FAQ item for it on the Highslide website.
Made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:
var flickrUser = "{URL}".split("/")[4];
var tag = "{URL}".split("/")[6];
var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:
<div id="p61789" class="post bg2">
I tried
var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below
<div class = "content">
and below the user posting area there is:
<div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.
So shouldn't something like:
$(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even
$(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...
EDIT: More detail added for Pointy:
<div id="p63167" class="post bg2 online">
<div class="inner">
<span class="corners-top">
<span></span>
</span>
<div class="postbody">
<ul class="profile-icons">
<li class="edit-icon">
<a href="posting.php" title="Edit post">
<span>Edit post</span>
</a>
</li>
<li class="delete-icon">
<a href="posting.php" title="Delete post">
<span>Delete post</span>
</a>
</li>
<li class="report-icon">
<a href="report.php" title="Report this post">
<span>Report this post</span>
</a>
</li>
<li class="info-icon">
<a href="mcp.php" title="Information">
<span>Information</span>
</a>
</li>
<li class="quote-icon">
<a href="posting.php" title="Reply with quote">
<span>Reply with quote</span>
</a>
</li>
</ul>
<h3 class="first">
Re: Testing new bbcode - ignore
</h3>
<p class="author">
<a href="viewtopic.php">
<img src="" alt="Post" title="Post" />
</a>by
<strong>
xxx
</strong>ยป 13 Jun 2011 14:33</p>
<div class="content">
<script>var
APIkey="xxx";head.js("/forum/jflickrfeed/jflickrfeed.min.js","http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js",function(){var
flickrUser="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[4];var
tag="http://www.flickr.com/photos/xxx/tags/7thjanuary2010/".split("/")[6];var
photoDIV=flickrUser+"-"+"tag";$(this).html('
<ul class="thumbs" id="photoDIV">
</ul>');$.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?",{method:"flickr.urls.lookupUser",url:"http://www.flickr.com/photos/xxx/tags/7thjanuary2010/",format:"json",api_key:APIkey},function(data){$('#cbox').jflickrfeed({limit:30,qstrings:{id:data.user.id,tags:tag},itemTemplate:'
<li>'+'
<a rel="colorbox" href="{{image}}" title="{{title}}">'+'
<img src="{{image_m}}" alt="{{title}}" />'+'</a>'+'</li>'},function(data){$('#cbox
a').colorbox();});});$.lazy([{src:'/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',name:'colorbox',dependencies:{css:['/forum/jflickrfeed/jflickrfeed.css','/forum/jflickrfeed/colorbox/example1/colorbox.css']}}]);});</script>
<ul id="cbox" class="thumbs"></ul>
</div>
<div id="sig63167" class="signature"></div>
</div>
</div>
</div>
the problem is you're assuming that the this context when you're executing within the script block is the script block itself, which is incorrect. If there is no context explicitly given, then your context is the window DOM element. Is there any reason you can't move this code to the page level, and initialize all the posts at page load?
$(function() {
$('.post').each(function(i,item) {
console.log(this); //Post DOM element.
//execute your flick retrieval code here.
});
}
Have you tried Javascript's DOM functions to add it?
http://www.javascriptkit.com/javatutors/dom2.shtml
For example, to insert right after the current script, with id "script1":
document.getElementById("script1").parentNode.appendChild( newelement );
You can add raw html too, just set innerHTML of the new element.