Load initial HTML into DIV when using jquery .load to change HTML in that DIV

Question

I have some basic jquery that is changing the content of a single div. The only thing that I can't figure out is how to show one of the four external HTML files (ie. lookbook20141217.HTML) as the default when the page first loads. Right now, the container DIV "lookBookWindow" is empty until one of the "buttons" is clicked.

JSFIDDLE

HTML

<div id="lookBookMain">

<div id="lookBookWindow"></div>

<input id="lookbook20141217" class="thumbnail rm" type="image" src="thumbnails/20141217.jpg" alt="maurices lookbook20141217" width="220" height="220" border="0" />
<input id="lookbook20141114" class="thumbnail rm" type="image" src="thumbnails/20141114.jpg" alt="maurices lookbook20141114" width="220" height="220" border="0" />
<input id="lookbook20141018" class="thumbnail rm" type="image" src="thumbnails/20141018.jpg" alt="maurices lookbook20141018" width="220" height="220" border="0" />
<input id="lookbook20141016" class="thumbnail" type="image" src="thumbnails/20141016.jpg" alt="maurices lookbook20141016" width="220" height="220" border="0" />

</div>

CSS

#lookBookMain {
    width: 940px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
}

#lookBookWindow {
    width: 940px;
    height: 580px;
    margin: 0px;
    padding: 0px;
}

.thumbnail {
    width: 220px;
    height: 220px;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    position: relative;
    float: left;
}

input.thumbnail:focus {
    outline-width: 0;
}

.rm{
    margin-right: 20px;
}

JQUERY

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

I feel like it should just be another line in the jquery, but I'm not finding what I need online. Thanks in advance!

Jason P · Accepted Answer · 2014-10-17 20:48:43Z

2

If you want a specific page to load, just .load() it outside the click handler.

Another option would be to trigger a click on the first image:

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');

}).first().click();

answered Oct 17, 2014 at 20:48

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

paulmz Over a year ago

It looks like this option would be a bit more dynamic in that it would always trigger the first "button" regardless if buttons are added/removed/rearranged. If I'm understanding correctly, this would mean I wouldn't have to adjust the jquery when adding buttons and HTML files for the container DIV... right?

Jason P Over a year ago

That's correct. On the topic of future-proofing, I would suggest giving these inputs a common class and using that in your selector. Currently, if you add an image input that shouldn't be included in this logic, you'll have issues.

paulmz Over a year ago

Thanks for the tip. I already have a common class of "thumbnail" on the "inputs", so I just added that class to the selector: $('input[type="image"], .thumbnail') Of course, feel free to let me know if I did it wrong.

Jason P Over a year ago

That selector will select elements that match input[type="image"], and also elements that match .thumbnail. You want $('input[type="image"].thumbnail') or simply $('.thumbnail') might work.

j08691 · Accepted Answer · 2014-10-17 20:46:33Z

0

I feel like it should just be another line in the jquery

It is. Outside of:

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

Add:

$('#lookBookWindow').load('lookbook20141217.html');

Using whichever HTML file you want to load in first.

answered Oct 17, 2014 at 20:46

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

paulmz Over a year ago

Yup, that's what I was missing. Thanks!

Collectives™ on Stack Overflow

Load initial HTML into DIV when using jquery .load to change HTML in that DIV

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related