I would like to know if it would be possible to add title and alt attributes of a displayed image with Lightbox2, using title and alt attributes of <a> tag.
For instance :
http://lokeshdhakar.com/projects/lightbox2/
Original :
<img class="lb-image" src="images/image-2.jpg" style="display: block; width: 640px; height: 640px;">
Modified :
<img class="lb-image" src="images/image-2.jpg" style="display: block; width: 640px; height: 640px;" title="Optional caption." alt="Optional caption.">
Thanks
Dom
Related
I develop Django apps and need to customize standard form for data entry that fit the structure in attached image bellow.
You can also see my current code that "do the job" but would like to know if it is the good way to do that or if there is better practices.
I have define css classes for my fixed heading-title, fixed footer-bottom and for my 2 buttons "Save" and "Cancel"
html
<nav class="navbar navbar-expand-md navbar-dark bg-info fixed-top" style="padding-top: 50px;">...</nav>
<!-- content form for field data entry -->
<div class="box row-full" id="heading-title">
<h3>Nouveau projet</h3>
</div>
<div class='container' style="margin-top:200px;margin-bottom:200px">
<form id="projecteditform" method="POST" class="post-form">
{% csrf_token %}
{{ form|crispy }}
<button id="ajouter_projet" class="btn btn-info .fixed-save" type="submit"
style="width: 100px; z-index:2">Valider</button>
<a data-modal data-target="" class="btn btn-dark .fixed-cancel" href="{% url 'project:index_projet' %}"
style="width: 100px; z-index:2">Annuler</a>
</form>
</div>
<div class="box row-full" id="footer-buttons"></div>
<!-- end content form for field data entry -->
<footer class="page-footer font-small blue fixed-bottom" style="background-color:white; z-index:1">...</footer>
css
.box {
width: 100px;
max-height: 60px;
color: white;
}
#heading-title {
position: fixed;
padding-top: 20px;
top: 100px;
color:black;
background: white;
}
#footer-buttons {
position: fixed;
bottom: 50px;
background: white;
}
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
text-align: center;
height: 100px;
left: 50%;
}
.fixed-save{
position: fixed;
bottom: 80px;
}
Thanks for your advices
In css recommended to use the id selector only for JavaScript.
Incorrect:
#footer-buttons
#heading-title
Correct:
.footer-buttons
.heading-title
It is not recommended to use inline styles in html.
Incorrect:
style = "margin-top: 200px; margin-bottom: 200px"
Correct:
.someclass { top-margin: 200px; bottom-margin: 200 pixels }
It is recommended to use the section and header tags.
http://htmlbook.ru/html/section
http://htmlbook.ru/html/header
It is not recommended to use different quotation marks. The code looks dirty.
Use "or '
Correct:
class = "container"
The dot is not needed here.
class = "btn btn-dark .fixed-cancel"
According to what I found django-widget-tweaks is one of the best ways to format django forms
See this
I am trying to display text under my image but it wont work. My image displays but not my text.
The textarea appears but it has no text and I cannot click and write on it. Although if I Ctrl+F it says the words are there but I cant see them nor are they highlighted
<div id = "folderlist">
<a href="">
<image src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
</div>
My CSS is as follows:
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
#folderlist a {
margin: 15px;
border: 8px solid transparent;
display: inline-block;
opacity: .8;
color:black;
}
#folderlist a:hover {
opacity: 1;
border-color: red;
}
.captionText {
display: block;
position: relative;
width: 100px;
height: 20px;
text-color:black;
border: 2px solid red;
}
I have tried different variations by removing placeholder using an input area and even just using <p> tags.
Any help would be much appreciated.
I have tried also the following:
<a style='text-decoration: none; color: orange;'>
<img src="${resource(dir: 'images', file: 'folderimg.png')}" width="100px" height="100px">
<div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>
The problem is with
#folderlist {
font-size: 0;
width: 1500px;
margin: 20px auto;
position: absolute;
top: 21%;
right: 8.1%;
text-align: center;
}
Setting the font-size to 0 tends to make text invisible :)
The code is fine. Just do one thing.
Put # in the anchor tag.
<a href="#">
<image src="cool.jpg" width="100px" height="100px"/>
<textarea class="captionText"placeholder="your default text">please display some text</textarea>
</a>
else there is no problem in code
A textarea is a form input. It's not something you use for just displaying text. Use a 'p' tag instead
Joshua Comeau is correct - the markup doesn't make sense.
<a> is an anchor tag. It is only allowed to contain certain things. Form elements, such as <input>, <select>, and <textarea> are not among them.
Textareas are the large text editing areas that you expect in a mail system. You don't use them to display text.
You can just put that text there not wrapped in anything at all. That's probably what you want.
If you just need something to attach style rules to, use a <span>.
If what you're trying to do is to get a rectangular area to put text into, you want a <div> instead.
<textarea> within <a> is not legal, and will never work in a compliant browser.
The code in your "I have also tried" is actually perfectly valid, and what you want to do.
Struggling to change the size of an image.
<div class="mypage">
<div class="mypage-block">
<div class="mypage-image">
<a href="/mylink">
<img alt="" src="mypic.jpg" style="width: 180px; height: 180px;"></a></div>
This is what I have tried
.page .page-block .page-image img {
width: 140px;
height: 140px;
}
When I inspect in Chrome it shows this img value as "element.style" set at 180px, this is the value I am having problems overriding.
Remove the inline styling...it will normally win as it comes after the CSS sheet as it will therefore have priority.
If absolutely necessary you can force the stylesheet to 'win' by adding !important statements but it's not recommended.
img {
width: 140px;
height: 140px;
}
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" style="width: 180px; height: 180px;" alt="">
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" alt="">
The inline style on the img element is overriding your CSS styling.
In order to undo this (assuming you have no ability to remove the inline style from the img element itself) you need to add an !important deceleration to your CSS attributes.
Your classes in your CSS file also do not match up those declared in your HTML
.mypage .mypage-block .mypage-image img {
width: 140px !important;
height: 140px !important;
}
I have two Spans I want span1 to be exactly below span2, even if span1 changes height dynamically.
<span id="Div3" style="Z-INDEX: 126; LEFT: 8px; WIDTH: 99.06%; TOP: 5px; visibility: visible;"
runat="server" ><asp:image id="Image1"
style="Z-INDEX: 127; LEFT: 16px; right: 709px;" runat="server"
tabIndex="10"></asp:image></span>
The above Span has an image, whose height can change dynamically.
I want this span
<span>Exactly below the image</span>
to be exactly below the span in which image is placed.
Could anyone help ??
I've created 2 spans. One with a img in it, and one with h1 in it.
<span class="span1">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="">
</span>
<span class="span2">
<h1>I'm span #2!</h1>
</span>
Both of the spans i have given the display property of block. This will make them stack under each other.
span {
display: block;
}
And gave the img some widthand height.
.span1 > img {
height: 200px;
width: 200px;
}
Demo here
you forgetting about setting: position: absolute and top: on both spans. ...if you want to positioning them absolutely.
if you just want them in the document flow then remove top/left/z-index from your styles - they doesn't have any result on the outcome until you add position:absolute; or position:relative;.
The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";