I would like to add a caption outside the image tag in the jssor Plugin
<div>
<img u="image" src="bilder/bild2.jpg" />
<div class="caption" u="caption" ><p>Caption text</p></div>
</div>
So that the caption wouldn't overlay the image - but be placed under it. (How) is that possible?
please use inline styles of 'position, top, left, width, height' for caption.
<div>
<img u="image" src="bilder/bild2.jpg" />
<div class="caption" style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px;" u="caption" ><p>Caption text</p></div>
</div>
Related
How I can align the icon to the rightcorner position.
but it needs to be responsive too.
I have tried using header in ionic but the right alignment is not working properly.
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
By right corner position, do you mean you want it to be on the header bar's right corner side?
If so, any button/a tag after h1 div would be placed on the right side.
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
If not, can you provide a codepen so I can take a look?
You can try this with position: absolute on image span. Something like this:
<div class="bar bar-header" style="background-color:silver; position:relative">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
You can also use float: right:
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="float:right">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
I guess this might solve your problem of right aligning your image along with responsive design.
If I put the div where I draw the graph the "style = display: none" attribute, this resizes my chart in half.
<div id='chart_div_inmediata' style='width: 900px; height: 300px;display:none'></div>
Result :
<div id="chart_div_inmediata" class="google-visualization-atl container" style="width: 900px; height: 300px; display: none;">
<div class="" style="position: relative; width: 400px; height: 200px;">
</div>
How do I fix this? Thank!
I'm having trouble with the responsive version of JSSOR slider.
I'm using full width slider.
My content and my navbar is in a container of 1250px width margin: 0 auto;.
What I want is that I put the captions also in this container.
Then the captions will align completely with my navbar and content.
But the slider also scales my container.
Is there a fix that the slider ignores my container?
Here is some demo code:
<div class="home-slider">
<div class="slides">
<div>
<img src="img.jpg" />
<div class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>
</div>
</div>
Everything in the slides container should be always be scaled along with the slider.
If you want an element not scale with slider, please move it out and specify noscale="true" attribute.
<div class="home-slider">
<div class="slides">
...
</div>
<div noscale="true" class="container">
<div u="caption" t="text" style="position: absolute; top: 60%; left: 70px;">
<p class="slider-caption-small">Lees meer over:</p>
</div>
</div>
</div>
I would like to format a slider so that a text title appears above the image and a button appears below. Is it possible create a slider similar to the attached screenshot?
You can place any html code in each slide,
<div u="slides">
<div>
<img u="image" src="url" />
<div style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your text here
</div>
<div class="yourbutton" style="position: absolute; top: npx; left: npx; width: npx; height: npx;">
Your button text
</div>
</div>
</div>
does anyone know how to use a single H1 tag effectively in a Jssor full width slider so that the tag also stretches and resizes with the slider when browser resizes?
Please just do it as what you can imagine. See following,
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px;
height: 500px; overflow: hidden;">
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
<div>
<img u="image" src="../img/1920/red.jpg" />
<h1>your content here</h1>
</div>
</div>