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 10 of 10

Thread: Need help.

  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help.

    Helping a friend get his online comic going. We are using code someone else developed, it works good, but as I don't know JS we were hoping getting some help to make a change. Biography - Instrument: of Whoopin is where the code is at. He wants the Biography text to show up as part of the website, not the image. When I tried typing in the content div, or the blank div that is inside of it, it all displays next to the thumbnails. If someone is willing can you help make it so the biography text can be laid on top of the image, instead of apart of it. Thank you all in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    He wants the Biography text to show up as part of the website...
    Ummm...it *IS* part of the website. Anything from that same base URL (Instrument Comics) is part of the website.

    Can't you be a *LITTLE* more specific as to what you are after???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Okay, I downloaded the image and I see what you mean.

    WHY OH WHY did you put the text into the image in the first place????

    I truly don't get it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    elements can be placed on top of each other using absolute positioning in their CSS. You have to decide what to do if the text takes up more space than the image (here a scrollbar is added if there is too much text)

    Code:
    <html>
    <head>
    <title>Clock</title>
    <style>
    #pic, #text{
    position:absolute;
    width:400px;
    height:400px;
    overflow:auto;
    }
    </style>
    <script>
    
    </script>
    </head>
    <body>
    <img id = "pic" src="http://www.horsebreedsinfo.com/images/brown_horse_running.jpg"/>
    <div id="text">
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
    
    At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repella
    </div>
    </body>
    
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Yeah, but I don't see why he needs anything on top of anything, given the page shown.

    He could just float: left the text and float: right the image and use a much smaller image than that monstrosity he is currently using.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    I'm assuming that, in the near future, there will be a database that holds member info. And among the info stored will be each member's intro text and the URL of an avatar image.

    Since you can't easily contain the "shape" of the text to avoid bumping into the avatar if the avatar is far from box shaped, then you would instead constrain the text inside of a box. And if done right, the text will be self adjusting as the user changes the size of the window that is displaying the site. You could even detect mobile devices and, perhaps, put the avatar above or below the text so that the text has the full width of the screen available.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I put the text on the image because if you go to, Biography - Instrument: of Whoopin that's what happens. The JavaScript code I am using places my text there with the thumbnail, not with the larger image. I know I can use CSS to float to what ever side, but my issue is getting my char bio to display where the text in my image used to be.

    These are not bios for members, but bio for the characters in his web comic. Didn't think we would need a database to store that.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Didn't think we would need a database to store that.
    Depends on how many characters you will have. If 20 or so, then I agree with you: No database. If 100 or more, use a DB. Between 20 and 100: Grey area. I'd go the DB route as being easier to later make changes. But that's me.

    Anyway, what's the difficulty in creating smaller character images (just enough to fill the right side of the page) and then putting the text in a separate <div> that you float left???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay cool, I'll keep that in mind as he releases new characters, so far it is just the one, a few more coming soon. Databases and JavaScript are real new to me so I am appreciating your help. so below is the reusable lines that the JS codes reuses to know what I am using a thumb nail of and the larger image. So in my mind the new div that I would use to contain the chars bio, would have to be contained in there because the JS code I am using is looking to affect what is inside of my content class. So as I place this new div in there, even floating it one way or the other it still appears in the area that displays the thumbnails, not where the larger image gets displayed. So does the new div I am adding need to be in there? If it helps I can post the whole pages code, but it's 380 lines, idk if thats too much to post.




    Code:
    <div class="content">
            	<div> <a href="charbio/images/rebeccaLaigo2.jpg"><img src="charbio/images/rebeccaLaigoThumb.jpg"  alt="Rebecca Laigo" class="thumb" /></a></div>
                
            </div>

  • #10
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so I found this code for displaying the big image how would i use this to help display the new div too? Can I use this to help with that?



    Code:
    function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
    	$this.fadeOut("fast",function(){
    		$this.attr("src", "").attr("src", imgSrc); //change image source
    		FullScreenBackground($this,imageWidth,imageHeight); //scale background image
    		$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
    		var imageTitle=$img_title.data("imageTitle");
    		if(imageTitle){
    			$this.attr("alt", imageTitle).attr("title", imageTitle);
    			$img_title.fadeOut("fast",function(){
    				$img_title.html(imageTitle).fadeIn();
    			});
    		} else {
    			$img_title.fadeOut("fast",function(){
    				$img_title.html($this.attr("title")).fadeIn();
    			});
    		}
    	});


  •  

    Posting Permissions

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