I have a view page that works well except for a readmore/hide section and
some text positioning.
This is the code:
{{extend 'layout.html'}}
<style>
#example {
background: white;
height: 0px;
overflow: hidden;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}
a.showLink, a.hideLink {
text-decoration: none;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
</style>
<script>
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display !=
'none') {
document.getElementById(shID+'-show').style.display =
'none';
document.getElementById(shID+'-hide').style.display =
'inline';
document.getElementById(shID).style.height = 'auto';
}
else {
document.getElementById(shID+'-show').style.display =
'inline';
document.getElementById(shID+'-hide').style.display =
'none';
document.getElementById(shID).style.height = '0px';
}
}
}
</script>
{{for image in images:}}
<div class="row">
<div class="col-md-1 col-lg-2"></div>
<div class = "col-md-10 col-lg-8">
<div class="likes_comments" style="border-radius:7px; border:
solid thin black;">
<img class="image img-rounded img-responsive center-block"
src="{{=URL('default', 'download', args=image.image_content)}}" />
<div class="comments">
{{query = (db.image_likes.imageid == image.id) & (db.
image_likes.author == (session.auth.user_id))}}
{{ list=db(query).select(db.image_likes.ALL) }}
{{ if len(list) ==0 :}}
<p class="heart" style="float: right;">
{{=A(INPUT(_type='button',_style="border-radius:
7px;background-color:
#78E5E3;color:#000000;font-family:'Audiowide';font-size: 16px;", _value=
'Like', _action="" ), _href=URL("like", args=image.id ))}}
{{pass}}
{{query = (db.image_likes.imageid == image.id)}}
{{ list=db(query).select(db.image_likes.ALL) }}
{{=len(list)}} ❤
</p>
<div class="readmore">
<a href="#" id="example-show" class="showLink"
style="font-size:24px;"onclick="showHide('example');return false;">Read
more</a>
<div id="example" class="more">
<div class="text"
style="width:100%;color:red;font-family:'Josefin
Slab';font-size: 22px;" >
Here is some more text: Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Vestibulum vitae urna nulla.
Vivamus a purus mi. In hac habitasse platea
dictumst. In ac tempor quam.
Vestibulum eleifend vehicula ligula, et
cursus nisl gravida sit amet.
Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</div>
<div
id="text-content"style="width:100%;color:red;font-family:'Josefin
Slab';font-size: 22px;">{{=image.caption}}</div>
<p>
<a href="#" id="example-hide" class=
"hideLink" style="font-size:24px;" onclick="showHide('example');return
false;">Hide</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 col-lg-2"></div>
</div>
{{pass}}
We are picking images from a database well, when it comes to the
readmore/Hide section, it only works with the first image.
*Problem:*
1. When scrolling down to subsequent images, on clicking the readmore
button, the text in the first image is the one that opens up only. How can
I make it to read only where the user wants when clicking the button?
2. I need to make the images as background and display extra text in the
foreground in addition to the hidden text. How can I do this.
3. I want these images to be visible to all users.
Kind regards
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/web2py/e99ab877-dd75-4774-9323-3f5c912357a3%40googlegroups.com.
