jQuery Forum

Insert multiple/different div content

in Using jQuery Plugins • 5 years ago

Hi there,

I´m trying to use this FILTERABLE PORTFOLIO: http://webdesigntunes.com/tutorial/filterable/

However I want to use content with multiple images and text.

I I found this code that works perfectly

INDEX

<div id="pholio">
<nav class="primary clearfix">
<ul class="conteudo_corrente">
<li><a href="#" class="selected" data-filter="*">All</a></li>
<li><a href="#" data-filter=".web">PRODUCT</a></li>
<li><a href="#" data-filter=".ill">PRINT</a></li>
<li><a href="#" data-filter=".logo">WEB</a></li>
<li><a href="#" data-filter=".video">VIDEO</a></li>
</ul>
</nav>
<section class="main">
<div class="portfolio">
<article class="entry video">
<div id="Descriptiondiv">
<IMG class="displayed" src="design/logo.gif" alt="Logo">
<div style="float:left; padding-top:10px;" class="conteudo_corrente"> CONTENT
</div>
<br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
<a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
<img src="images/portfolio/work1.jpg" alt="">
<span class="video-hover">video</span>
</a>
</article>
</div>

CSS

#Descriptiondiv {
width:50% !important;
/*height:50%;*/
height:1800px;
display:none;
}

the problem is when i enter a new content with different images like thise.

<div id="pholio">
<nav class="primary clearfix">
<ul class="conteudo_corrente">
<li><a href="#" class="selected" data-filter="*">All</a></li>
<li><a href="#" data-filter=".web">PRODUCT</a></li>
<li><a href="#" data-filter=".ill">PRINT</a></li>
<li><a href="#" data-filter=".logo">WEB</a></li>
<li><a href="#" data-filter=".video">VIDEO</a></li>
</ul>
</nav>
<section class="main">
<div class="portfolio">
<article class="entry video">
<div id="Descriptiondiv">
<IMG class="displayed" src="design/logo.gif" alt="Logo">
<div style="float:left; padding-top:10px;" class="conteudo_corrente"> CONTENT
</div>
<br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
<a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
<img src="images/portfolio/work1.jpg" alt="">
<span class="video-hover">video</span>
</a>
</article>
<article class="entry web">
<div id="Descriptiondiv">
<IMG class="displayed" src="design/logo.gif" alt="Logo">
<div style="float:left; padding-top:10px;" class="conteudo_corrente"> CONTENT 22
</div>
<br /><img class="displayed" src="images/portfolio/work_04.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_05.jpg" width="70%"/>
<br /><img class="displayed" src="images/portfolio/work_06.jpg" width="70%"/>
<a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
<img src="images/portfolio/work1.jpg" alt="">
<span class="video-hover">video</span>
</a>
</article>
</div>

It repeated the same content on the first (entry video) to the second (entry web).

I think the problem is because I'm using the same id = "#Descriptiondiv"

Eu consigo resolver o problema ao colocar vários id. E xample:

CSS

#Descriptiondiv {
width:50% !important;
/*height:50%;*/
height:1800px;
display:none;
}
#Descriptiondiv2 {
width:50% !important;
/*height:50%;*/
height:1800px;
display:none;
}

But that's not the best solution.

Can anyone suggest another way?

Thank you and Merry Christmas :)

Replies(16)

Re: Insert multiple/different div content

5 years ago

I think the problem is because I'm using the same id = "#Descriptiondiv"

Yes.

JΛ̊KE

Re: Re: Insert multiple/different div content

5 years ago

Jakecigar, I know that answer thank you!

Can anyone give me a direct and practice solution please?

Re: Insert multiple/different div content

5 years ago

Use unique ids. Use classes for CSS.

<div id="Descriptiondiv" class="Description">

<div id="Descriptiondiv2" class="Description">

.Description {
width:50% !important;
/*height:50%;*/
height:1800px;
display:none;
}

JΛ̊KE

Re: Re: Insert multiple/different div content

5 years ago

I have tried this way but does not work:

A think the problem is:

<a href="#Descriptiondiv" data-rel="prettyPhoto" title="">

Re: Insert multiple/different div content

5 years ago

Can you share a link to a page that demonstrates the problem?

JΛ̊KE

Re: Re: Insert multiple/different div content

5 years ago

I already solve. I did not understand part of what you said.

Solution:

CONTENT 1

<div id="Descriptiondiv" class="Description">

<a href="#Descriptiondiv" data-rel="prettyPhoto" title="">

CONTENT 2

<div id="Descriptiondiv2" class="Description">

<a href="#Descriptiondiv2" data-rel="prettyPhoto" title="">

CONTENT 3

<div id="Descriptiondiv3" class="Description">

<a href="#Descriptiondiv3" data-rel="prettyPhoto" title="">

and só on

CSS

.Description {
width:50% !important;
height:1800px;
display:none;
}

Thank you Jake :)

Re: Re: Insert multiple/different div content

5 years ago

Hi there,

I just launch my new website.

www.marcobalsinha.com

It works fine in PC but i´m having a problem on the lightbox when using a IPADs or IPHONEs.

When open a project that have a lot of images the height lightbox doesn't fit the browser and cut some images.

see the PrtSc

I'm using this code to resize the height lightbox:

<article class="entry product">
<div id="Descriptiondiv1" class="Description">
<IMG class="displayed" src="design/logo.gif" alt="Logo"><div id="" style="overflow-y:scroll; height:100vh; width:100%">
<div style="float:left; padding-top:10px; width:99%" class="conteudo_corrente" >

I think the problem is height:100vh.I tried height:100% and with nothing and it works, but i need a lightbox with an internal scroll so that when I see multiple images of the same project it does not move the homepage position behind.

any ideas?

Thank you :),

and send me a feedback of the website if you like.

Re: Insert multiple/different div content

5 years ago

It works fine on my iPad. Are you using an ancient one? Or, an old version of IOS?

JΛ̊KE

Re: Re: Insert multiple/different div content

5 years ago

Thank you Jake, again.

Yes, i'm using the 7.1 IOS in in both.

Ok, thank you watusiware.

It might be better to leave like this, what do you think?

http://caniuse.com/#feat=viewport-units

Re: Insert multiple/different div content

5 years ago

While vh support is growing, it's supported on Android only from 4.4. It should work on current iOS, but properly only from iOS8. (Press "Show All" button).

Re: Insert multiple/different div content

5 years ago

But you don't need vh to size things to 100% viewport height. I use this solution:

// http://stackoverflow.com/questions/25238/100-min-height-css-layout

// WebKit body won't inherit min-height from html

html,

body {

margin: 0;

padding: 0;

height: 100%;

}

Now if you size something that is a direct descendant of <html> to height of 100%, it will fill 100% height of viewport.

I use this as a starting-point for flex-box layouts that fill the height of the screen. You can then use a flex layout inside of this for:

- header, content, footer (where content is small height that will fit, or might contain an iScroll or FTScroller or overflow:touch...)

- "tile" layout to fill the page (if you have a fixed number of rows, set their height to 1/n)

So, basically, use flex to slice-up the height.

Re: Re: Insert multiple/different div content

5 years ago

Older IOS that doesn't support vh, probably doesn't support flex-box either.

JΛ̊KE

Re: Insert multiple/different div content

5 years ago

Figure out who you are trying to reach. Do you care about people who have not updated their devices?

If you do, don't use vh. And check for other features of HTML and javaScript that didn't work way-back-then.

JΛ̊KE

Re: Insert multiple/different div content

5 years ago

The problem child here is Android. You need at least 4.4. And Android users aren't so keen (or aren't even able) to update as much as iOS users.

Re: Insert multiple/different div content

5 years ago

It all goes back to deciding who the audience is. Do you care about IE 7 users? Old Androids? Ancient iPhones and iPads?

There is a lot of cool CSS on your site that won't work with them!

JΛ̊KE