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
Related
I'm trying to put a scroll up (back to top) button in my blogger blog.
That should be, in principle, quite simple, but I don't why I can't manage to do it. Now after trying so many things I'm totally frustrated.
I'm using the following html code:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#"><img src="url address of image" /></a>
The button is there as expected, but when I click on it, it reloads the blog instead of going to the top. Why?? no clue.
I tried to use an "id" in the logo image and link to it, and I've also tried to use in the blog head a name tag "name=Top" and link it with href="#Top".But it doesn't matter. It always reload the blog instead of going to the top.
For instance, when I'm inside a post and I click on the button it goes to the main page instead of scrolling up within the post.
If you want to check it yourself, please do it. My blog is cortarcoserycrear.blogspot.com
Whatever help you can provide me it would be very appreciated because I don't know what's happening.
Thanks.
You should be using Javascript/JQuery to do this.
Refer to this question: How to scroll to top of page with JavaScript/jQuery?
What I finally used to solve my problem was:
Button html:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" class='go-to-top' title="Back to top"><img src="image url" /></a>
Body html:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
The assumption behind this question is that the designer is using proportional queries in a Responsive Web Design and going from 1-column on a smartphone to 2 and 3-column on the displays where they will comfortably fit.
A content widget jQuery plugin (like a Recent Updates widget) should change it's character in the different layouts. In 1-column layout it might need to be 4 small text links and in 2 or 3-column layouts it can include thumbnails and extra text.
For reference, here's the code as the end-user of the content widget would see it.
HTML:
<section id="sidebar">
<section id="latestupdates"></section>
</section>
JS:
(function($){
$(function(){
$("#latestupdates").widgetco_latestupdates();
});
})(jQuery);
I think the best way to hook into the designers layout changes is this. Ask for the breakpoints as parameters for widgetco_latestupdates during initialization and use the resize events to toggle css classes.
Is this even the right method? What are the pitfalls with doing this?
UPDATE:
Since asking, I have found enquire.js which will handle running the queries. That still leaves the question of this being the right method.
If you are careful with the classes you assign to the content, you can likely control everythinhg with standard CSS.
For example, say your desktop output was something like
<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
read more
</article>
Then in your CSS you manage what content to show on which devices with
#media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}
#media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}
I think if you can use CSS to manage the different layouts it will be more flexible and easier to update going forward.
Good luck!
EDIT
If you are thinking about ajax to add / remove content based on the visitor's viewport, here are two interesting links:
http://filamentgroup.com/lab/ajax_includes_modular_content/
Project on Github
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
Is it possible to change CSS position of a background image with a DIV ("omega") from a separate link ("alpha") with a MOUSEOVER?
<a class="omega" href="#"></a>
<div id="alpha"></div>
Is JavaScript/jQuery ok? If so, something like this should work:
$('.omega').hover(function(){
$('#alpha').css('backgroundPosition', '500px 150px');
}, function(){
$('#alpha').css('backgroundPosition', '0px 0px');
});
The first function is for mouseover, the second one resets it when the mouse leaves. Admittedly, I haven't tried this, but in theory it should work. See jquery hover and jquery css for more info.
A client has asked for a page loader, something "attractive" to let the visitor know that the content is on its way. This is for standard html content - text, images, etc.
I have seen a few on the web, but many of them are dated and rather clunky. I am looking for something that is not a pain to implement but still looks decent.
Thanks in advance.
It wouldn't be hard to build your own. You could have a page that shows an animated gif and then loads the page using AJAX. You can get some great loading gifs just by searching for something like "AJAX loading image". This may or may not seem easy to you, but it doesn't sound too hard to me if you were using jQuery and PHP.
Example
Say you have two files: test1.htm and test2.htm. You want to show the contents of test2 (which take a bit to load) on test1 (which should have the parts of the page that load quickly). Here's the two files I made (this uses jQuery):
test1.htm
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>
test2.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>
So this should work for what you're planning to do. The important thing is that you try to divide up your page into parts that load quickly and parts that load slowly.
If you want to create attractive loader, then you should go through nice animated image. But I suggest you to use combination of animated image and jQuery, Because in jQuery there is a lot of animation available. You can checkout following link for more details,
jQuery Animation API
How to add loader
Your HTML like -
<div class="loader"></div>
Your CSS like
.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}
Your javascript code like -
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>