I have my web pages using HTML5 , JavaScript, Jquery, and CSS3!
It's just the way i need it to be when the window is full screen.
Just as I resize the window, the alignment goes haywire!
I need a simple fix!Please help! Thanks in advance!
Here is a small part of my code:
<img id="myimage1" onclick="changeimage1()" src="images/build_i.png" />
<img id="myimage2" onclick="changeimage2()" src="images/apply_i.png" />
<img id="myimage3" onclick="changeimage3()" src="images/learn_i.png" />
If i resize this window to the minimum the alignment changes.It starts to come one below the other.How do i get rid of that?
Give min-width and min-height to body tag/parent element. (In CSS)
or
Try this: (In jQuery)
$(window).on('ready resize',function(){
// post your code here related to layouts
});
Related
Hello guys I have a problem with the javascript (i m not a big fan of this language :)). So I would like on my website an automatic Scroll : i have four div,which one has the same height (depends on the size of your screen). I want when i scroll to the bottom (or the top) that the slider goes directly to the next div (or previous), like a magnet. So I tried the scrollTo but i don t know how it works because i have to listen the scroll... so here is my html:
<!--Samsung Galaxy-->
<div class="bloc" id="samsungtab">
<img src="images/samsung.png" alt="samsunggalaxytab" />
</div>
<!--ORA-->
<div class="bloc" id="ora">
<img src="images/ora.png" alt="logo" />
</div>
<!--Oculus Rift-->
<div class="bloc" id="oculus">
<img src="images/oculus.jpg" alt="logo" />
</div>
<!--Acer-->
<div class="bloc" id="acer">
<img src="images/acer.jpg" alt="logo" />
</div>
and the javascript for the automatic size of the different div:
$(document).ready( function(){
var hauteur = (document.documentElement.clientHeight);
var position = hauteur/4;
$(".bloc").css("height",hauteur);
$("#samsungtab").css("margin-top",position);
$("#ora").css("margin-top",position);
$("#oculus").css("margin-top",position);
$("#acer").css("margin-top",position);
});
Thank you very much in advance for your help!!!!
Tom
To me it seems like you are looking for something like this:
https://github.com/peachananr/onepage-scroll (demo here: http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
I would advise you to use this jQuery plugin (based on the JS code in your example you are using jQuery).
If you'd like to code it yourself, you should start by rewriting your CSS. Setting the height of the .block elements via JS should not be necessary, but it depends on how the rest of your HTML is built up. If you add the complete HTML file here I might be able to assist on this as well.
After that you should look into jQuery's .scroll() handler. Usage:
$(window).scroll(function(){
//code that runs on scroll here
})
Another useful jQuery function in this case is .offset(). You can get the coordinates (so as well the distance from the top) of any visible element like this:
$('.block').offset().top.
Lastly, you should look into jQuery's .scrollTop() function. You can use this function to get the current scroll position: $(document).scrollTop(), or to set the desired scroll position:
$(document).scrollTop(200)
Good luck, I hope it helps!
I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!
Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.
Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");
Basically in my ASP.NET MVC4 project I'm trying to have my validationmessages as tooltips (which gets displayed when hovered over a certain image).
Right now the error message is inserted into the image title - however I'd like to ONLY display the image when it has a title (when it doesn't have a title there is no error message).
How can I do this?
I don't suppose it is possible through CSS so a js/jquery solution would work too.
To clarify I need to check update the display as the title changes during runtime.
An initial check is not gonna do it.
Here is the pure CSS solution.
The CSS Code:
img{display:none;}
img[title]{display:block;}
Here is a WORKING DEMO
The HTML:
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" title="" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
The CSS:
img{display:none;}
img[title]{display:block;}
Hope this is what you are looking for.
Only display images with a title?
$('img').filter(function(i, el){
return !$(el).prop('title');
// (empty/undefined titles evaluates as false)
}).hide();
Is this what you're asking for?
Perhaps this css selector is enough (will only work in modern browsers):
img:not([title])
{
display: none;
}
I'm following this simple demo tutorial here:
http://jquerytools.org/demos/scrollable/index.html
Well basically, I'm following the tutorial above. The problem with that demo is that it loads all the images at one time affecting performance greatly. I want it so that it only loads a set of images every time you click the arrows. So basically, once you go to the page, it loads the first set of images first. Then, once you click one of the arrows, it loads the next set of images. This is so that the page has a much shorter load time. Is there anyway to do that with ajax or maybe jQuery load? I want it to be something like the link below but using the jquery tools scrollable plugin:
http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html
It'd be helpful if you provided some of your code. However, from the documentation shown, your image sets should be in separate divs to achieve what you want
//one set
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>
///Next set, revealed on click
<div>
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
</div>
So I'm trying to have an effect that when you click on an image, two more images (stored in #sharebar) will slide out from the left. The issue is currently when the images slide out, they slide from the left under the button, and then shift up after the animation is complete. I would like everything to be on the same level the whole time, so that the images appear to slide out from behind.
Can anyone help me out? Here's what I have:
<script>
$(function() {
// run the currently selected effect
function slideOut() {
var options = {};
$("#sharebar").toggle("slide", options, 500, callback() );
};
function callback() {
};
// set effect from select menu value
$( "#download_link" ).click(function() {
slideOut();
return false;
});
$("#sharebar").hide();
});
</script>
</head>
<body>
<div style="margin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" />
<img id="subtitles_link" src="subtitles.png" />
</span>
Thanks in advance! :)
EDIT: I think this may have to do with z-index, but I'm not quite sure
I would definitely say z-index is going to be the way to go. It looks like you have some z-index things set already; just fix your z-index so the images layer on top of each other like you want them to.
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" />
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />
Just as a side-note: You're better off sticking these style attributes in a CSS document, rather than putting them in your HTML markup.
Setting the "top" element to have style="position:fixed" fixed the problem!
EDIT: Haha not sure why there's a downvote, it ended up fixing the problem.... :P