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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Know nothing about coding-- NEED HELP

    Hey Guys,

    I just want to preface this post by saying nothing about coding whatsoever. I am just trying to build a website via squarespace, but it does not have a feature I want available. I want to create a text only slideshow but cannot get it to work. The following is what I have come up with. If anyone could take a look at it and make the necessary edits that would be great! Thanks

    Code:
    <div id="slideshow">
       <div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">I had the pleasure of having Zach be part of my team for the Outreach division of the Bentley Microfinance Group. Zach was proactive in making recommendations to the group and was integral in transforming the group to what it is today. Working in a position that required sensitive social interactions, I would feel comfortable putting Zach in front of any client.
    <br/>
    <br/>Matthew Picarello <span  style="font-style:italic" >, Investment Banking Analst, J.P. Morgan</span></p>
       </div>
       <div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">Zak is a natural leader. He motivates and guides others through his ability to communicate effectively. In my experience, Zak approaches each task with both an innovative and creative prospective. He is a provider of honest feedback and is sought out frequently for advice. Any organization would benefit greatly with Zak on their team.
    <br/>
    <br/>Conor Lamo <span  style="font-style:italic" >, Insurance Operations Leadership Development Program, Travelers</span></p>
       </div>
    	<div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">I got the opportunity to work with Zach as an MBA consultant for his Capstone project. Zach is hardworking and works well in a team. As part of an excellent group, Zach coordinated effectively with his team members and attached more importance to the team's goal than to individual contributions. Different members of the team with diverse backgrounds went through the forming and eventually performing cycle of the Capstone project to deliver a well-researched and commendable presentation. It was my pleasure to work with Zach and I wish him good luck with his future endeavors.
    <br/>
    <br/>Swapneel Desai <span  style="font-style:italic" >, Senior Financial Analyst, ATT</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">Zak is an extremely ambitious individual. He is one of the most hard working people that I have ever been around. He is willing to do whatever it takes to accomplish any of his goals. Whenever he is given a task, he goes above and beyond to accomplish it. He balances everything on his plate with pure ease and completes everything with a smile on his face. He brings forth many assets to the table that help him become the successful individual that he is to this day. He is an extremely strong member of any team that he is a part of and his appearance and hard work does not go unrecognized.
    <br/>
    <br/>Nicholas Ashley <span  style="font-style:italic" >, Financial Analst, Merrill Lynch</span></p>
       </div>
    	<div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">Zak is always passionate about investing, the markets and finance in general. Discussing the recent market trends, developments, and ideas has become routine with Zak, and he is very knowledgeable and has a desire to learn more and keep dissecting investment ideas and develop the thesis and catalysts that affect the stock's movements.
    <br/>
    <br/>Dan Stroller <span  style="font-style:italic" >, Investment Banking Analyst, Oppenheimer & Co.</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">Zachary is a hardworking motivated student who understands what is needed to succeed. He is persistent in his work and will consistently achieve high level results.
    <br/>
    <br/>Joshua Kulak <span  style="font-style:italic" >, Financial Leadership Program Associate, United Technologies</span></p>
       </div>
    <div>
         <p style="font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;;color:##666666;">Zachary has great analytical skills and excellent work ethics. He quickly learned the tasks necessary for him to be effective with his summer projects. He did not hestiate to ask questions and learn, in order to make recommendations in timely manner. Most importantly, he has a strong drive to get the most value during his summer internship.
    <br/>
    <br/>Preecha Sensarn <span  style="font-style:italic" >,Product Director, Travelers</span></p>
       </div>
    Code:
    #slideshow { 
        margin: 50px auto; 
        position: relative; 
        width: 240px; 
        height: 240px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    Code:
    $("#slideshow > div:gt(0)").hide();
    
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
    Last edited by VIPStephan; 04-02-2013 at 11:55 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    ttkim (04-04-2013)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello raicik.zach ,
    When you say "text slideshow" I wonder if you mean some sort of marquee? Maybe just some way of scrolling content that overflows it's container?

    Look at this snippet and see if it does what you want -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    		/* HTML5 tags */
    		header, section, footer,  aside, nav, article, figure { display: block; }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0 0 300px; /*demo only*/
    	overflow: auto;
    	background: #999;
    }
    #slideshow {
    	height: 400px;
    	width: 600px;
    	margin: 30px auto;
    	padding: 20px;
    	overflow-y: scroll;
    	background: #ccc;
    	font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    	color: ##666666;
    }
    	#slideshow span {font-style: italic;}
    </style>
    </head>
    <body>
    	<div id="container">
    		<div id="slideshow">
    			<p>
    				I had the pleasure of having Zach be part of my team for the Outreach division of the Bentley Microfinance Group. Zach 
    				was proactive in making recommendations to the group and was integral in transforming the group to what it is today. 
    				Working in a position that required sensitive social interactions, I would feel comfortable putting Zach in front of 
    				any client. <br/><br/>
    				Matthew Picarello <span>, Investment Banking Analst, J.P. Morgan</span>
    			</p>
    			<p>
    				Zak is a natural leader. He motivates and guides others through his ability to communicate effectively. In my experience, 
    				Zak approaches each task with both an innovative and creative prospective. He is a provider of honest feedback and is 
    				sought out frequently for advice. Any organization would benefit greatly with Zak on their team. <br/><br/>
    				Conor Lamo <span>, Insurance Operations Leadership Development Program, Travelers</span>
    			</p>
    			<p>
    				I got the opportunity to work with Zach as an MBA consultant for his Capstone project. Zach is hardworking and works well 
    				in a team. As part of an excellent group, Zach coordinated effectively with his team members and attached more importance 
    				to the team's goal than to individual contributions. Different members of the team with diverse backgrounds went through 
    				the forming and eventually performing cycle of the Capstone project to deliver a well-researched and commendable presentation. 
    				It was my pleasure to work with Zach and I wish him good luck with his future endeavors. <br/><br/>
    				Swapneel Desai <span>, Senior Financial Analyst, ATT</span>
    			</p>
    			<p>
    				Zak is an extremely ambitious individual. He is one of the most hard working people that I have ever been around. He is 
    				willing to do whatever it takes to accomplish any of his goals. Whenever he is given a task, he goes above and beyond to 
    				accomplish it. He balances everything on his plate with pure ease and completes everything with a smile on his face. He 
    				brings forth many assets to the table that help him become the successful individual that he is to this day. He is an 
    				extremely strong member of any team that he is a part of and his appearance and hard work does not go unrecognized. <br/><br/>
    				Nicholas Ashley <span>, Financial Analst, Merrill Lynch</span>
    			</p>
    			<p>
    				Zak is always passionate about investing, the markets and finance in general. Discussing the recent market trends, 
    				developments, and ideas has become routine with Zak, and he is very knowledgeable and has a desire to learn more and 
    				keep dissecting investment ideas and develop the thesis and catalysts that affect the stock's movements. <br/><br/>
    				Dan Stroller <span>, Investment Banking Analyst, Oppenheimer & Co.</span>
    			</p>
    			<p>
    				Zachary is a hardworking motivated student who understands what is needed to succeed. He is persistent in his work and 
    				will consistently achieve high level results. <br/><br/>
    				Joshua Kulak <span>, Financial Leadership Program Associate, United Technologies</span>
    			</p>
    			<p>
    				Zachary has great analytical skills and excellent work ethics. He quickly learned the tasks necessary for him to be 
    				effective with his summer projects. He did not hestiate to ask questions and learn, in order to make recommendations in 
    				timely manner. Most importantly, he has a strong drive to get the most value during his summer internship. <br/><br/>
    				Preecha Sensarn <span>,Product Director, Travelers</span>
    			</p>
    		<!--end slideshow--></div>
    	<!--end container--></div>
    </body>
    </html>
    Just copy/paste that entire example into a new .html document and view it in your browser.

    There is also a new approach to the ancient marquee tag that was so unpopular in the old days, have a look at this site for an explanation.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically what I need is a slideshow that looks like this: http://css-tricks.com/examples/SimpleSlideshow/

    However, instead of pictures I want it to have the test I used in my original example. I just need it as Helvetica Nueue, size 14pt, color #666666 on a white background. Is it possible?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    .jQuery does that slideshow. You will need to load those files from your page like the example your looking at does.

    Something like this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0 0 300px;
    	overflow: auto;
    	background: #999;
    }
    #slideshow { 
    	margin: 80px auto; 
    	position: relative; 
    	width: 240px; 
    	height: 240px; 
    	padding: 10px; 
    	box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    	background: #fff;
    	font: 14pt/22pt "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    	color: ##666666;
    }
    	#slideshow span {font-style: italic;}
    #slideshow > div { 
    	position: absolute; 
    	top: 10px; 
    	left: 10px; 
    	right: 10px; 
    	bottom: 10px; 
    }
    </style>
    </head>
    <body>
        <div id="container">
    		<div id="slideshow">
    			<div>
    				<p>
    					I had the pleasure of having Zach be part of my team for the Outreach division of the 
    					Bentley Microfinance Group. Zach was proactive in making recommendations to the group 
    					and was integral in transforming the group to what it is today. Working in a position 
    					that required sensitive social interactions, I would feel comfortable putting Zach in 
    					front of any client.<br />
    					Matthew Picarello <span>, Investment Banking Analst, J.P. Morgan</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					Zak is a natural leader. He motivates and guides others through his ability to 
    					communicate effectively. In my experience, Zak approaches each task with both an 
    					innovative and creative prospective. He is a provider of honest feedback and is sought 
    					out frequently for advice. Any organization would benefit greatly with Zak on their 
    					team.<br />
    					Conor Lamo <span>, Insurance Operations Leadership Development Program, Travelers</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					I got the opportunity to work with Zach as an MBA consultant for his Capstone project. 
    					Zach is hardworking and works well in a team. As part of an excellent group, Zach 
    					coordinated effectively with his team members and attached more importance to the 
    					team's goal than to individual contributions. Different members of the team with 
    					diverse backgrounds went through the forming and eventually performing cycle of the 
    					Capstone project to deliver a well-researched and commendable presentation. It was 
    					my pleasure to work with Zach and I wish him good luck with his future endeavors.<br />
    					Swapneel Desai <span>, Senior Financial Analyst, ATT</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					Zak is an extremely ambitious individual. He is one of the most hard working people 
    					that I have ever been around. He is willing to do whatever it takes to accomplish 
    					any of his goals. Whenever he is given a task, he goes above and beyond to 
    					accomplish it. He balances everything on his plate with pure ease and completes 
    					everything with a smile on his face. He brings forth many assets to the table that 
    					help him become the successful individual that he is to this day. He is an 
    					extremely strong member of any team that he is a part of and his appearance and 
    					hard work does not go unrecognized.<br />
    					Nicholas Ashley <span>, Financial Analst, Merrill Lynch</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					Zak is always passionate about investing, the markets and finance in general. 
    					Discussing the recent market trends, developments, and ideas has become routine with 
    					Zak, and he is very knowledgeable and has a desire to learn more and keep dissecting 
    					investment ideas and develop the thesis and catalysts that affect the stock's 
    					movements.<br />
    					Dan Stroller <span>, Investment Banking Analyst, Oppenheimer & Co.</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					Zachary is a hardworking motivated student who understands what is needed to succeed. 
    					He is persistent in his work and will consistently achieve high level results.<br />
    					Joshua Kulak <span>, Financial Leadership Program Associate, United Technologies</span>
    				</p>
    			</div>
    			<div>
    				<p>
    					Zachary has great analytical skills and excellent work ethics. He quickly learned the 
    					tasks necessary for him to be effective with his summer projects. He did not hestiate 
    					to ask questions and learn, in order to make recommendations in timely manner. Most 
    					importantly, he has a strong drive to get the most value during his summer internship.<br />
    					Preecha Sensarn <span>,Product Director, Travelers</span>
    				</p>
    			</div>
    		<!--end slideshow--></div>
        <!--end container--></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script>
    	$(function() {
    	
    		$("#slideshow > div:gt(0)").hide();
    
    		setInterval(function() { 
    		  $('#slideshow > div:first')
    			.fadeOut(1000)
    			.next()
    			.fadeIn(1000)
    			.end()
    			.appendTo('#slideshow');
    		},  3000);
    		
    	});
    </script>
    </body>
    </html>
    You will need to re-think the size of #slideshow. Obviously a 240px square box is too small. I'd think you'd want to slow that slideshow down a bit too. That's too much text to read in the short time it's displayed right now.

    To change the display time, change the number highlighted in red below -
    Code:
    <script>
    	$(function() {
    	
    		$("#slideshow > div:gt(0)").hide();
    
    		setInterval(function() { 
    		  $('#slideshow > div:first')
    			.fadeOut(1000)
    			.next()
    			.fadeIn(1000)
    			.end()
    			.appendTo('#slideshow');
    		},  1000);
    		
    	});
    </script>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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