Develop Reference

HTML bug, Image not displaying on Google Chrome

I am trying to make a website for my friend's Graphic Design company.
I keep getting this bug where the <img> and <video> just displays my container without any Images/Video in it just a black box. Not even my alt's?? I've never had this happen before.
I do have quite a lot of stuff going on in my stylesheet; including beizer transformations on the container, would that be a problem as it was working, but I changed the image dimensions.
My question is, how do I debug this/ how do I get it to just display my photos in my container.
Edit: I'm 2nd year CompSci but am new to HTML/CSS
My image and mp4 is in the same directory of my index.html in the img and vids folder:
website/img/Sunburnt.jpg
website/vids/statuspr.mp4
website/index.html
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"><span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="#">
<div class="project__image-container plane plane--media">
<!-- The preferred img, mp4s -->
<img src="/img/Sunburnt.jpg" alt="Sunburnt Breakfast Rave" />
<video src="vids/statuspr.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>

I cant comment so i try as an answer even though its not 100% clear:
Just looking at your code:
you use a / before the img folder only with the image.
If you're not looking at the file from a server, this will give a 404..
debug using F12, and look at network errors or console errors

So I was able to fix this by creating a new container (project__image-container2) which used a less intricate implementation of CSS in my stylesheet.
I also changed up my src from data-src and just including my images and videos in my project. The combination of these two solutions did solve my problem - that I could not display images and videos withing these containers - however, my website now loads said videos and images quite slowly. However that is something I can try and fix later.
<!-- Project 1: Sunburnt Breakfast -->
<div class="section section--work" data-label="Project 01">
<div class="col project-wrap">
<div class="col__item project">
<div class="project__count"> <span class="project__count-current reveal">02</span><span class="project__count-total reveal">/ 28</span></div>
<a class="project__image noselect" target="_blank" href="website-I-don't-want-the-world-to-know-about">
<div class="project__image-container2 plane">
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
<noscript>
<video src="vids/visualsTrim.mp4" muted="muted" autoplay="autoplay" loop="loop" preload="preload"></video>
</noscript>
</div>
</a>
<div class="project__meta">
<h3 class="project__meta-title plane">Canberra Rave Scene</h3>
<div class="project__meta-tags">
<div class="reveal"><span>Social Media</span><span>Entertainment</span><span>Rave</span>
</div>
<div class="reveal"><span>Visuals</span><span>DJ</span>
</div>
</div>
</div>
</div>
</div>
<button class="section__nav section__nav--left noselect clickable"><span class="text--giant text--bold"><span>Back</span></span></button>
<button class="section__nav section__nav--right noselect clickable"><span class="text--giant text--bold"><span>Next</span></span></button>
</div>
I hope that this helps anyone facing this niche problem out there. DM me or comment and I will try to help you through it if you are struggling with this issue too.
Thank you to everyone who helped me get here. Love my stackoverflow community !!! Yall the best xx

how to create moving div up and down on click

how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?

The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>

lightbox not showing different images

I found a lightbox online and copied it into my code.
the first image works perfectly, onclick to show, then click again to close.
but when you click on the second picture it shows the first one again, eventhough i replaced all the sources with another picture. what am i doing wrong? And be gentle, i'm new to all this
<img id="gallery1" src="gallery1.jpg"></img></p>
<div id="light" class="white_content1"></a> <img id="gallery1lb" src="gallery1.jpg"></img></div>
<div id="fade" class="black_overlay1">
</div>
<img id="gallery2" src="gallery2.jpg"></img>
<div id="light" class="white_content2"></a> <img id="gallery2lb" src="gallery2.jpg"></img></div>
<div id="fade" class="black_overlay2">
</div>

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>

How to use HTML Anchor (A) tag in Javascript

I am trying to create a tabbed page. I have the following code
<div class="profile">
<div class="profileHR" onclick="load(this)">
<a href="<c:url value="/secure/profileLink.htm"/>?show=changePassword"
target="iframeProfile">Change Password</a>
</div>
<div class="profileHR">
<a href="<c:url value="/secure/profileLink.htm"/>?show=setupHours"
target="iframeProfile">Setup Business Hours</a>
</div>
<div align="center" class="profileContent">
<iframe name="iframeProfile" src=""></iframe>
</div>
</div>
When i click on the anchor the url is forwarded to the iframe. But i want to be able to click anywhere on the div class="profileHR" and it should forward to iframe url. So i was trying to write a javascript onclick event for div, but how do i simulate the anchor event inside a javascript?

Why won't you just wrap the div with the <a> anchor?
instead of <div> ... <a> </a> </div> Have this:
<a><div> ... </div></a>
No need for javascript or what so ever.

I prefer an onClick event
<div class="profile">
<div class="profileHR" onclick="load(this); changeIFrame(/*whateverinfoyouneed*/);">
Change Password
</div>
<div class="profileHR" onclick="changeIFrame(/*whateverinfoyouneed*/);">
Setup Business Hours
</div>
<div align="center" class="profileContent">
<iframe name="iframeProfile" src=""></iframe>
</div>
</div>

<a href=somelink#frameID>whatever</a>
some content
<iframe id=frameID></iframe>
should work

this can be accomplished using css3
here are some links with examples and tutorials on creating this
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/