Develop Reference

Hyperlink with relative url does not respond

OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>

how to set background-image of list items in Javascript?

I have a simple div with bunch of list items that I need to set their background with javascript? any help would be highly appreciate it, let say I have url1, url2, url3, url4?
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/subway.jpg');">
<div class="inner">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a> </div>
</li>
<li style="background-image: url('img/shop.jpg');">
<div class="inner">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
</ul>
</div>

My suggestion here would be to create separate CSS classes for each of the background image styles you want. Then you can use a library like jQuery to addClass to any HTML element. Here's the jQuery documentation: addClass
Ideally, you want to avoid convoluting your CSS with JavaScript code and as much as possible, keep these two separate from each other.

How do i add a hyperlink to a data-image line of code? CSS3

I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers

wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>

Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed

Changing some html elements, and changing url without reloading page

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>

Adding a new element HERE where the code is, not after another element

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.