Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Overlapping getting messed up by Javascript?

    I'm an intern and am actually looking for someone to help me work this entire project, I mean if the forum is willing to do it for free that's excellent, but I could offer some form of compensation (for doing my job haha)


    Essentially my goal was to create a changing image on the index, and have an overlapping semi transparent bar on the right. The image and the bar/text/link all need to change simultaneously, and I have (thus far) gotten the image to change using the following;

    http://jonraasch.com/blog/a-simple-jquery-slideshow

    So, I use all their javascript etc.

    How exactly can I get a div box over the image?



    The city image is position absolute, and the z-index doesn't work worth jack to get another one over it. Or perhaps that's caused by the changing nature of the code. (the transitions)

    I also tried using a float & relative positioning with a left: -px, that wouldn't work, but I may have done something wrong...

    NOTES:
    I need an additional image overtop (the title "Unrivaled Strategy")
    The "[read more]" needs to be the only clickable portion.

    2 Possibilities:
    A)The box is simply a transparent portion of the city image, the text overlaps on the right.
    B)The box is the second div and has a semi transparent background....

    All the Coding is Available here,

    HTML Java Inscribe:
    Code:
    <script type="text/javascript">
    
    function slideSwitch() {
        var $active = $('#slideshow DIV.active');
    
        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
        var $next =  $active.next().length ? $active.next()
            : $('#slideshow DIV:first');
    
        $active.addClass('last-active');
    
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }
    
    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
    
    </script>
    HTML Div:
    Code:
    <div id="slideshow">
        <div class="active">
            <a href="google.com/"><img src="OPF/BG/b1.jpg" alt="Slideshow Image 1" /></a>
        </div>
        
        <div>
            <a href="google.com/"><img src="OPF/BG/b2.jpg" alt="Slideshow Image 2" /></a>
        </div>

    CSS Controls:
    Code:
    #slideshow {
    	position:relative;
    	height:484px;
    	margin-left:10px;
    }
    
    #slideshow DIV {
    	position:absolute;
    	top:0px;
    	left:0px;
    	z-index:8;
    	opacity:0.0;
    	height: 484px;
    	background-color: #FFF;
    }
    
    #slideshow DIV.active {
        z-index:10;
        opacity:1.0;
    }
    
    #slideshow DIV.last-active {
    	z-index:9;
    }
    
    #slideshow DIV IMG {
    	height: 484x;
    	display: block;
    	border: 0;
    }
    Thank you so much in advance! Let me know if you want to work with me also.
    Last edited by Mike Walker; 07-08-2011 at 04:51 PM.

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Bring
    Up
    My
    Post

    So, I guess the reason is because I can't put a div within a div given the current cycling of the divs, is this correct?

    I really need help...

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,925
    Thanks
    46
    Thanked 203 Times in 202 Posts
    Quote Originally Posted by Mike Walker View Post
    Bring
    Up
    My
    Post

    So, I guess the reason is because I can't put a div within a div given the current cycling of the divs, is this correct?

    I really need help...
    i think the problem is in how you worded your first post... i read it and immediately moved on... i am more willing to help you now bc it seems like you are trying to do it yourself, but in the FP you essentially asked for other ppl to do your work and you are getting paid for it... this is simply not the forum for hiring freelance work (so no post's back bc of that) and this forum overall (entire site) does not take to well with ppl asking other ppl to do their work for them... especially when it is a learning xp... i would suggest working through it in here (and by your "bump" you may get more responses now- again seems like you are trying to do something)... i think paying someone else to do it will defeat the purpose of an internship and will (in the long run) hurt you... looking at code now... will get back to you as to ideas... but one thing i did see as i scanned was that in #slideshow DIV IMG {styling} you set a height of 400somethingx instead of px... it might be something as simple as that...
    thinking***

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    Mike Walker (07-11-2011)

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    47
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Well what's funny is I would prefer to do it myself I just offered that because I felt like it was a hefty amount of work to help on.

    I have succeeded in my task, by the way, but adding even more animation and making it more simple, I decided to use:

    http://www.serie3.info/s3slider/demonstration.html

    So I guess I can delete this now.

    Unless we want to discuss problems with this system as well...

    I can't seem to change opacity of the text without changing the opacity of the block. I want the writing to be extremely easy to read, the singular control for opacity of text/black bar is not helping...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •