0

I would like to give the background-image it's own class so I can use the javascript code on it. However, if I remove it from the current div the background-image can not be displayed because it is the background-image for this div.

This is the web2py View:

{{extend 'layout.html'}}

{{for color in bg:}}
<div class="project_video" style="background-image: url('{{=URL('download', args=color.bg_picture)}}')">
{{pass}}

<video class="movie" style="width: 100%;" src="{{=URL('download', args=videos.clip)}}" autoplay poster="{{=URL('static', 'images/tabla_loading_poster.png')}}" onended=videoEnded()></video>

<div class="objects" hidden>
{{for pic in pics_objects:}}
<a href="{{=URL('pic_answer', args=pic.id)}}"><img src="{{=URL('download', args=pic.pictures)}}"/></a>
<audio autoplay src="{{=URL('static', 'images/pop.mp3')}}"></audio>
{{pass}}
</div>
    </div>

Of course if I use the javascript on the project_video class it will apply to the entire div. not only to the background-image.

This is the web2py Controller for the above View:

def game():
    videos = db.vid(request.args(0,cast=int)) or redirect(URL('index'))
    bg = db(db.back.owner_id==request.args(0)).select()
    pics_objects = db(db.pic.owner_id==request.args(0,cast=int)).select()
    return locals()

This is the javascript bellow but, as I mentioned, this will hide the whole div and what I want to hide is the background-image only:

<script>
$(function(){
    $('.project_video').hide();
});
$(window).load(function() {
    $('.project_video').delay(6000).show(0);
});
</script>

I would appreciate any advise.

Joe T. Boka
  • 6,554
  • 6
  • 29
  • 48
  • You cannot set a CSS class on a background image. What exactly do you need to do with that image via JavaScript? – Anthony Aug 15 '15 at 12:01
  • @Anthony Thanks for your comment Anthony, I edited my post and added the javascript. I want to hide the `background image` at first and I only want to show it after the video is fully loaded and playing. – Joe T. Boka Aug 15 '15 at 15:24
  • @Anthony Hello Anthony, is what I am trying to do here possible? Do you have any suggestions? Please kindly let me know. Thanks very much! – Joe T. Boka Aug 19 '15 at 05:57
  • This question might help: http://stackoverflow.com/questions/25439145/hide-or-display-none-for-backgroundimage-using-jquery – Anthony Aug 19 '15 at 18:02

0 Answers0