How do I configure reading text for all images using Hide/Readmore code?
26 views
Skip to first unread message
Maurice Waka
Oct 7, 2019, 5:44:28 AM10/7/19
to web2py-users
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:
- 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?
- 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.
- I want these images to be visible to all users.
Kind regards
villas
Oct 7, 2019, 11:09:11 AM10/7/19
to web2py-users
The HTML elements in your loop should be given unique ids and then you can address them individually.
Also, optionally...
I would advise you to only access your DB in the controller, (rather than the view).
Create a list (or even 2 lists) containing your image links and associated data.
Once you are happy with the structure, then create the HTML
Maurice Waka
Oct 7, 2019, 11:29:10 AM10/7/19
to web2py-users
Thanks for the reply. I have a controller for this view already. My biggest issue is the way to display the image and message.
Do you have an example of how I can do it?
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 a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/yGYmy3BKbJk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/7900aa00-fc3b-486f-b3d0-cdb49c589020%40googlegroups.com.
villas
Oct 8, 2019, 7:46:35 AM10/8/19
to web2py-users
It seems that you need to learn some jQuery.
This example may help, just add it to your html view...
<button id='b1'>B1 Show/Hide</button>
<div id="note_b1">test div1</div>
<br>
<button id='b2'>B2 Show/Hide</button>
<div id="note_b2">test div2</div>
<br>
<button id='b3'>B3 Show/Hide</button>
<div id="note_b3">test div3</div>
<div id="note_b1">test div1</div>
<br>
<button id='b2'>B2 Show/Hide</button>
<div id="note_b2">test div2</div>
<br>
<button id='b3'>B3 Show/Hide</button>
<div id="note_b3">test div3</div>
$(document).ready(function () {
$('button').click(function () {
var id = $(this).attr("id");
$("#note_"+ id ).toggle();
});
});
$('button').click(function () {
var id = $(this).attr("id");
$("#note_"+ id ).toggle();
});
});
On Monday, 7 October 2019 16:29:10 UTC+1, Maurice Waka wrote:
Thanks for the reply. I have a controller for this view already. My biggest issue is the way to display the image and message.Do you have an example of how I can do it?Regards
On Mon, 7 Oct 2019, 18:09 villas <vill...@gmail.com> wrote:
--The HTML elements in your loop should be given unique ids and then you can address them individually.Also, optionally...I would advise you to only access your DB in the controller, (rather than the view).Create a list (or even 2 lists) containing your image links and associated data.Once you are happy with the structure, then create the HTML
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 a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/yGYmy3BKbJk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web...@googlegroups.com.
Maurice Waka
Oct 8, 2019, 8:51:20 AM10/8/19
to web2py-users
<div id="text-content"style= "width:100%;color:red;font-family:'Josefin Slab';font-size: 22px;">{{=image.caption}}</div>
<p>
<a href="#" id="{{=image.id}}-hide" class="hideLink" style="font-size:24px;" onclick="showHide('{{=image.id}}');return false;">Hide</a>
</p>
</div>
I replaced 'example' with the {{=image.id}}.
It works....
But all text comes unhidden but on individual clicks, they hide. I have to click twice..to hide the 'readmore', then the text itself.
What I need is a default "Hidden" text where the user can click to open.
Is there anything different that I can do on the jQuery code?
Kind regards
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/0f787f71-6bb4-4f5d-85f3-304caea165b6%40googlegroups.com.
Maurice Waka
Oct 8, 2019, 11:01:10 AM10/8/19
to web2py-users
Solved.
Did some CSS work.
Thanks for the
help.
God bless
Reply all
Reply to author
Forward
0 new messages