Hi I have an xml file in wich I put some image in this way: <pb facs="ciao.jpg">.
Then I have an xsl file where i put a Java script like this:
<script type="text/javascript">
function toggleSize(img){
if (parseInt(img.style.width) !=220){
img.style.width='220px';
}
else {
img.style.width = '90%';
}
}
function showHideNote(noteId){
var note = document.getElementById(noteId);
if (note.className == 'hiddenNote') {
note.className='showingNote';
}
else {
note.className='hiddenNote';
}
return false;
}
</script>
and it makes a little image where I can click and all the text under.
So the problem is that I would like to have a bigger image on the left and the text related on the right. Any suggestion?
Just add float: left to the style for the image.
<div>
<h1 style="text-align:center" id="chapter_1">Capitulo primeyro</h1>
<img src="folio16r.jpg" style="width: 120px; cursor: pointer; float: left"
onclick="toggleSize(this)" alt="page image from manuscript">
<p style="text-align:justify; font-family:garamond"> dddd </p>
</div>
By the way, the html you posted in the comment is not the same as the original question (the question has ciao.jpg for the picture, while the HTML has folio16r.jpg. And I'm not sure how and where you're appying the style. So I hope you can make this work.
Related
When we insert a image to blogger post it automatically inserts a separator with 'text-align:center;'. I want to remove it(and set it to left instead of center). But it's hard to remove it manually for every image in every post. Is there a easy way to do this automatically?
I tried .post-body img{float:left;} template CSS. This gets the image to left, but then texts flow to right side of the image instead of under the image. Please help me to do this.
Edit: Below is the normal div that an image would be automatically surrounded when a image is added to a blogger post. Below that is the texts of post.
<div class="separator" style="clear: both; text-align: center;">
<a href="-----.html"; imageanchor="1" style="margin-left: 0em; margin-right: 1em;">
<img alt="" border="0" src="1.bp.blogspot.com/1.JPG"; title="" />
</a></div>
<br/>
<span style="font-size: large;">text paragraph texts texts</span><br />
Within the <b:skin> or in a separate <style> within the <head> of your template include the following CSS code:
.post-body .separator {
text-align:left !important
}
I can't see the rest of your code, if you uploaded something like a js.fiddle that would help! The code below should fix the text alignment with your images, if it doesn't let me know!
.post-body img {
float: left;
text-align: left;
}
.post-body .separator a {
margin: 0!important;
}
I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.
what i'm looking for is a way that when an image is hovered the text, that is over it, changes. I've searched the site for while all the solutions don't seem to work for me.
Here's my code.
<div class="four columns full-height">
<div class="projects">Collectif Neuf</div>
<img class="vertical" src="images/projects/c9.jpg">
</div>
i've also tried this : CSS image hover change color of text
it only works if the img is over my .projects div. But my .projects div needs to be over the img for it to display properly.
Thanx for your help.
EDIT
I've just realize that i didn't explain well what i am looking for. By text change i meant that when the image is being hover the link will be underline. Now the link only gets underline if it's being hover.
Really sorry for that.
Without jquery:
<script>
function domover(el) {
el.parentNode.parentNode.firstChild.firstChild.style. = 'Hi!';
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration = 'underline';
}
function domout(el) {
el.parentNode.parentNode.firstChild.firstChild.innerHTML = 'Bye';
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration = 'none';
}
</script>
<div class="four columns full-height"><div class="projects">Hi</div>
<img class="vertical" src="http://i.imgur.com/l5WLB.jpg" onmouseover="domover(this)" onmouseout="domout(this)">
</div>
Test: http://pastehtml.com/view/c6kbpxrzp.html
Notice that, for this to work, there must be no spaces (nor newlines) between the first elements.