I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options
Related
I am using Laravel-Snappy for generating pdfs with wkhtmltpdf. I want to add a border in all pages that are created in the pdf file. At the moment, I have added this to the css:
body.pdf {
border: 1px solid #000;
}
My pdf html is like this:
<html>
<head>
<title>{{ $title }}</title>
</head>
<body class="pdf">
.....
</body>
</html>
With the above css, the border shows fine if it is a single page pdf. However, when it has multiple pages, the border breaks at the bottom of the first page and no more border shows from page 2 onwards after the page-break. I also read the documentation and I dont think there is an feature to add borders using setOption().
Is there a way to resolve it so the border appears in all pages when pdf is generated?
Please take look at here, you can find all available options available including border.
You didn't mentioned how you used page break.
I am using this way
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
Working fine for me
According to the fullpages.js documentation, it should be possible to vertically center the contents of .sections with the parameter verticallyCentered (which defaults to true).
However, I can't get this feature to work with the following HTML structure:
<div id="content">
<div class="section container">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Title</h1>
</div>
</div>
</div>
</div>
The content of the .col-xs-12 div (i.e. the heading) remains at the top of the window.
I am using Bootstrap for scaffolding (if that is of any relevance). Also, the basic functionality of fullpage.js (i.e. the single-page scrolling) is working without any problems.
You are probably using some absolute positioned element and that's the reason why fullpage.js can not deal with it.
You can easily see in the examples that fullpage.js centers the content correctly when using verticalCentered:true, which is the default value.
I had the same issue.
I fixed it by styling the default class, added by fullpage.js:
.fp-tableCell {
display: flex;
align-items: center;
justify-content: center;
}
Since I couldn't get the vertical centering functionality to work, I ended up disabling it by setting verticalCentered to false. As a replacement I am now using jQuery-Flex-Vertical-Center which works out of the box.
Sorry to resurrect this question but the problem is that you didn't include the css file of FullPage.js
I am trying to make a blur image change on mouseover. Something like camera zooming in and out with certain things get blurred when other is zoomed in. Best way to understand what I want is to see it here:
http://berger.co.rs/test/test.html
And I have only one problem. The mouseover image is always behind the active image. I need to have only active image and when mouseover is applied, then to change images. Also, I don't want active image to disappear in total, and then to load mouseover image. I need it like on example above, just not to have mouseover image shown behind all the time.
You can see whole code I have inside of the page source.
Can you please help me?
First welcome to Stackoverflow, as a new user, please read this guide so you can ask better and get better and quicker answers:
https://stackoverflow.com/help/how-to-ask
please avoid code on comments. If someone ask you for additional code, include it in the question.
Now the answer:
The problem is just that you didn't provide Jquery for $() commands to work. "alturl.com/bcfhv" isn't correct.
here, put this on file, it's working:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
Or see it working here
In all my pages my content fit to the body:
But where i have forms they go over the footer and body don't resize:
Where is the problem?
Your form probably contains a lot of floated elements, so you might want add this to your <form> CSS:
form {
...
overflow: hidden;
}
I have experienced something similar this week.
Try using
<div style="clear:both"/>
to encapsulate your content within your page.
<div id="mainDiv">
content
<div style="clear:both"/>
</div>
the issue is clearly with floated elements in the form. You can fix it using the micro clearfix by Nicolas Gallagher, currently the "best practice" for the issue
http://nicolasgallagher.com/micro-clearfix-hack/
Don't use overflow: hidden; as it might give you trouble if you want any element to overflow the form. (eg. select).
Also, tables are not a good idea for the layout, and empty divs to clear are not necessary.
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here :
<img id="img1" class="img1_1" src="hello1_1">
<div class="textDesc">HELLO1_1</div>
</img>
Though the div is appended to img tag , but I cant see the text "HELLO1_1" on the image.
Please can anyone help me?
If you need the source code I can share it with you.
Here is the link to test the scenario :
http://jsfiddle.net/XUR5K/9/
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Rules of good tone.
Use null source in IMG tag.
Use CSS content:"" for WebKit browsers.
Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Example: https://github.com/Alexei03a/canvas-img