I have an issue to use an image with gradient as the background image for the main menu bar.
This the image for the background:
As you may know, the image has 2 gradient, first, the very far left and secondly 3/4 to the right. What I want to achieve is like this:
Does anyone know the best practice to do this? I know the only problem with this is the width of the browser, where I need to make sure the very far left will start with very light grey. The very far right, will be the dark grey.
Another problem that I have is the center gradient for the main page:
This is a little bit easier and can be done by CSS gradient. However, I have been trying to set the gradient start from the center, behind the yellow div.
If anyone knows how the best way to achieve this, that would be great.
Thank you for you help in advance.
If just use the image as an background image?
<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div>
To achieve this purely in css, you could make two containers with a gradient each, that way they could change width and it would still look the same.
For example
HTML:
<div id="container">
<div id="gradient1"></div>
<div id="gradient2"></div>
</div>
CSS:
.container { ..... }
.gradient1 {width:60%; float:left; GRADIENT}
.gradient2 {width:40%; float:left; GRADIENT}
Related
I wonder if there is a way to be able to scroll to the rest of the background-image since i've been using background-size : cover; and the background i'm using is way bigger than the screen.
You can apply it with the CSS class or style on ion-content tag editing height of background-size to size in pixels(background-size: 100% 902px), like:
<ion-content style="background: url('../assets/img/bg.jpg') no-repeat;background-size: 100% 902px;" padding>
I want to make a view in ionic zoomable when pinch. Is it possible to achieve this? I have see many many posts about zoom images and some of them work fine. But i want to make ion-view acts the same way and i haven't find any solution yet.
Any help would be appreciated. Thank you.
You may add an ion-scroll inside your ion-view to enable zooming
<ion-view>
<ion-scroll zooming="true" direction="xy" style="width: 400px; height: 400px">
<div>
Your content goes here
</div>
</ion-scroll>
</ion-view>
i want to display a div with a background image. I don´t want the div to have any other content than the background image and i don´t want to use a img instead.
It would work with fixed values like height: 100px, but i want to use percentage declaration.
Why is it not showing? Is it even possible with percentage values? Or do i have to declare anything else?
I want to build a RESPONSIVE mobile site, where i can use template buttons and fill it with html text so i don´t need to use several images for the same button with different text. Is there a better way?
Thanks in advance here is my code:
<div id="icon1">
</div>
#icon1 {
background-image: url(images/MyPicture.png);
width: 30% ;
height: 100%;
}
it'd only work if a percentage height is set to all of the parent elements of the DIV#icon1 up to the BODY and HTML tags.
http://fiddle.jshell.net/YJQcF/1/
Otherwise, it'll need fixed height or min-height values to be assigned to it;
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)
i have a webview in my application and it works fine. it fits horizontolly (not scrolls) and scrolls vertically. but any word which is longer than 320 pixel makes it scrolls horizantally and makes the font larger. i don't would like horizontal scroll. i would like it to be continued in new line. how can i do?
thanks.
The problem you have is actually not related to the UIWebView in itself. What the web view does is just display any html you provide. This means that you have to format the html to do as you want. One way to accomplish that is to use a div as follows.
<div style="width: 320px; word-wrap: break-word">
text with looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongword goes here
</div>
Caveat: I don't know very much about html and css so there might be better ways of accomplishing this.