How to make a video gallery using append() in JQuery?

Ok thanks @megazoid

One more question you have defined a class name as “imageBlock-template”

and in the CSS file you are specify and applying css like this

div.imageBlock{

}

so my question is there is not any imageBlock class so how this CSS apply on this?

I hope you got my point

There is two classes in my example (scroll the CSS pane if you don’t see second one):

div.imageBlock { 
    float: left;
    margin: 0 10px;    
    background-color:"#FFF099";
}

div.imageBlock-template {
    display:none;    
}

When we want to make new imageBlock we copy template and swap the classes:

var newBlock = $(".imageBlock-template").clone();
newBlock.removeClass('imageBlock-template').addClass('imageBlock'); // -- Swap classes
$(".images").append(newBlock);

That approach allows us to not to worry about template block when we select our images with $('.imageBlock')

I can understand this

but there is not any imageBlock class in your HTML code?

We’re creating them dynamically in the loop

Ok ya now its clear

Thanks

Is there any way so that I can set imageBlock css while creating it not previously on some file?

You can use .css() method to add inline styles to new block when creating it

awesome

see my code for adding it

Thanks

there is one more Issue when I integrate this code with my whole code it looks like this

I am trying to add all blocks under the “main-content” class but they are overlapping in my footer class to

let me explain there is 3 class in my case one is
“top-header”,“main-content”,“footer”

I am trying to add all my gallery code under the main-content area but it is spreading till the bottom.And it overlap with footer section.How to fix this?

That’s happening because your .main-content has floating childs.
Solution: add overflow:hidden to .main-content
You can learn more here about this problem.

@megazoid

Thanks awesome help

this is my code

I have some more question on this

suppose I am playing a video using HTML video tag like this

"<video controls>
<source src="myPath" type="video/mp4">
</video>"

Now problem is

  1. when I set full path on video src tag video fully is not loaded

like suppose a video is of length 10:00 and I want to jump to at 05:00 is it possible to do with video tag

so that without playing the whole video I can jump to 05:00 parts?

and there is one more problem

2)As you can see when their is short window available then at that time “Home”,“MyProfile”,“Gallery”,
“Video”,“Upload CV” are inside red block
but content of topImageBlock are not inside it it goes out of that block

How to fix this issue?

anyone is this?

That shouldn’t make a difference, so your full path is probably incorrect

[quote=“vngx, post:19, topic:193437”]
like suppose a video is of length 10:00 and I want to jump to at 05:00 is it possible to do with video tag
[/quote]You’ll need Javascript - http://www.w3schools.com/tags/av_prop_currenttime.asp

I can’t debug an image :slight_smile: . Code though? Sure, I can debug that.

Can You run above mention code in your browser?

You will get a clear picture what I am trying to say.

I know you can’t debug image :smile:

How about 400px left margin on that content?

<div style="margin-left: 400px;">

Thanks
@megazoid
I figure out it and sort out

due to default margin assign to a block it was not able to float

Now there is one more problem one block is “dropdownmenu” and second is “loginblock”

as you can see these two I assigned float left and float right they are also overlapping

this is due to height and width property of dropdownmenu elements?

I don’t see they overlapping
If you mean that .loginblock is under menu that happens because there is no enough width to make them both float in one “line”

Got it thanks

Yeah their was not enough space that’s why they are overlapping

till now all issues are solved on this

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.