Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Devise Alignment issues for fade in/out jQuery

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 21 total)
1 2
  • Author
    Posts
  • June 16, 2015 at 10:40 pm #203887
    Jeni B
    Participant

    Hi!

    I’m a beginner with javascript, but very excited about all it can do. I am using a fade in/ out with jQuery.

    While my site looks perfect in Firefox and Safari, the alignment of the font in slightly pushed to the left in Chrome and the entire page is off the right on my android phone.

    As a followup, I noticed that when I hit the back button to go back to the new page that has the automatic refresh some browsers will refresh automatically and others just show a white screen. Is there a way to ask the browser to refresh when going back to the original page?

    Any help would be greatly appreciated!

    Here is what I have so far,

    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<style>
body {
margin:0;
padding:0;
background-image:#FFFFFF;
display: none;
text-align:center;
width: 50%;
position:relative;
left: 25%;
top:25%;
overflow:auto;
}
</style>

<body>

<a href="http://www.newpage.com">Skip Into</a>

<img src="Web_site71108/images/landing_page2.jpg" width="900" height="600" alt="text" />
<h2>This page will automatically redirect in 2 seconds.<h2>

<script type="text/javascript">
$(function() {
$('body').fadeIn(2000, function() {
$(this).delay(2000).fadeOut(2000, function() { window.location = 'http://www.newpage.com'; });
});

});
</script>
<noscript>This is an <a href="http://www.newpage.html">alternate text link</a>for browsers with JavaScript disabled.</noscript>

</body>
    June 17, 2015 at 7:43 am #203911
    Shikkediel
    Participant

    Could you maybe post a live link? Looks to me the page gets redirected after 6 seconds by the way…

    June 17, 2015 at 7:48 am #203912
    Paulie_D
    Member

    Is there a way to ask the browser to refresh when going back to the original page?

    Probably but that’s not standard behaviour in my experience…probably not something the user would actively want to have happen.

    Gotta say too…what’s all this about?

    body {
margin:0;
padding:0;
background-image:#FFFFFF; /* say what? */
display: none;
text-align:center;
width: 50%; /* really...why not use a container */

position:relative;
left: 25%; /* odd way to center */
top:25%;

overflow:auto;
}

    That’s messed up.

    June 17, 2015 at 8:22 am #203915
    Shikkediel
    Participant

    I don’t think you can refresh that way though, unless you use a cookie or something. The page would not know when it’s initially coming back or being visited for the first time – so the refresh will go into an endless loop.

    June 17, 2015 at 8:34 am #203919
    Jeni B
    Participant

    Thanks for the replies Shikkediel,

    Here’s link to the page,

    http://www.jenuinelyjeni.com

    Like I said I’m far from an expert. I have a lot to learn and haven’t written much code at all in a few years. I really do want to learn though.

    I did have the idea to write a variable for IE and possibly for phones that would skip the intro page all together. However, I saw that browser sniffing is not best practice, don’t know if this would qualify or not.

    Yeah, I hadn’t really looked at the timing much, I think I was just focused completely on making the script function. I fixed that and sped it up a bit.

    Just saw your post about the refresh. I wasn’t sure if that could be done without creating an endless loop or not. Thought maybe it could, but it’s not that important really.

    Thanks!

    Jeni

    June 17, 2015 at 8:56 am #203920
    Shikkediel
    Participant

    Personally I think jQuery is excellent and well worth spending any amount of time on to get better at it. :-)

    But redirecting like this might not be the best practice. I would prefer to show and hide several elements on the same page and maybe add a custom ‘back’ button to get a sense of navigation. That said, this might do the trick for showing the original page :

    $(this).delay(2000).fadeOut(1500, function() {

  $(this).show();
  window.location = 'http://www.jenuinelyjeni.com/store/index.html';
});

    You’d have to try out if it’s simultaneous enough so that showing the page again isn’t noticeable.

    I’d need to read back a bit for a possible solution to the other issues…

    June 17, 2015 at 9:22 am #203922
    Jeni B
    Participant

    Thanks, I really like your idea about showing and hiding elements on the page.

    In regards to best practice and redirects, I run into a little roadblock with my e commerce platform. I have had the site for many years and have well over 100 products in there. Overall I like the system, but the index page for the system must end in /store.index.html. If I use a 301 redirect to link to the /store.html page and if I were to change platforms down the road I think it could be problematic. I have read that 301 redirects can be reversed, but the browsers sometimes take a few weeks to cache. If a returning customer sees a page down for any length of time they would probably assume the company is out of business. Since I can’t use the 301 redirect without compromising my domain to some degree I am not sure what the best approach to redirect would be, I figured javascript was as good as any.

    June 17, 2015 at 9:43 am #203925
    Shikkediel
    Participant

    If it’s a necessity then I don’t see any objection to a redirect. But I wouldn’t put a timer on it myself, rather a ‘continue’ button for example. That’ll give the visitor some control over it.

    Could you elaborate on the alignment issue? Maybe post a screenshot. It may have to do with the CSS, like Paulie_D pointed out.

    I did have the idea to write a variable for IE and possibly for phones that would skip the intro page all together.

    For what exactly would IE need a special approach, do you reckon?

    June 17, 2015 at 11:27 am #203934
    Jeni B
    Participant

    I would say it is definitely a CSS issue. Much of the code I wrote in the past was table based, I do struggle through the CSS. What I had previously written seemed to work, or so I thought. As soon as I try to place everything in divs I seem to get alignment issues that I do not know how to correct. If I were writing this page with tables it would be very easy to place an empty cell X pixels wide to help force the image into the center. I have been trying to configure something with divs and percentages and I feel like no matter what I try the image shows up all the way to the left of the screen. I am not sure what I could to correct this. I do not want to use tables because I would like the page to be flexible when viewed from devises.

    It would be nice to get the site looking great in all browsers, but I was not sure I would be able to with IE so I figured I’d bypass the page if I had too much trouble with it. That’s a cop out I know, the issue should be resolved rather than avoided.

    Thanks for all your help!

    June 17, 2015 at 11:32 am #203935
    Paulie_D
    Member

    On the alignment issue, if you could make a reduced case demo in Codepen.io I’m sure we can come up with some basic suggestions.

    June 17, 2015 at 12:01 pm #203939
    Jeni B
    Participant

    Great Thanks!

    There are a number of issues here. This was my attempt to contain everything in multiple divs. Several elements don’t quite line up.

    http://codepen.io/anon/pen/GJvbMy.html

    http://codepen.io/anon/pen/GJvbMy.css

    http://codepen.io/anon/pen/GJvbMy.js

    June 17, 2015 at 12:06 pm #203940
    Jeni B
    Participant

    Sorry, the links didn’t work, here’s a copy

    [MOD EDIT – Codedump Removed]

    June 17, 2015 at 1:13 pm #203943
    Shikkediel
    Participant

    This the idea?

    Link to pen

    You can enable jQuery through the cog icon next to ‘JavaScript’, typing the first few letters will make it appear to click on and select.

    June 17, 2015 at 2:02 pm #203945
    nkrisc
    Participant

    Sorry I’m going to be that guy, but I thought we left website intros behind in 1999.

    June 17, 2015 at 2:18 pm #203948
    Jeni B
    Participant

    Oh, margin…. thanks!!!

    Ok so I noticed that you are linking to a different jQuery script that appears to be more recent. I tried your version and had very inconsistent results with the timing of the redirect. Safari bypassed the page altogether, Firefox redirected extremely fast when set to .fadeIn(100000, function(), Chrome looked pretty good though (can’t check IE here). Are there any drawbacks to using an old version?

    Also the image does distort. I added this, but it didn’t seem to help.

    img {
    max-width: 100%;
    max-height: 100%;
    }

    I also tried max-height: auto; and without a max-height. Is there another way to contain proportions of the image?

    Thanks so much for all your help!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 21 total)
1 2
  • The forum ‘JavaScript’ is closed to new topics and replies.