Responsive Content Experiment

Developer
Size
4,586 Kb
Views
28,336

How do I make an responsive content experiment?

Responsive content, hide images in small display, swap out with button so user still has choice to display or not.. What is a responsive content experiment? How do you make a responsive content experiment? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.

Responsive Content Experiment Previews

Responsive Content Experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Content Experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:after, *:before{ box-sizing: border-box;
}
body{ color: #333; font-family: 'Helvetica Neue', 'Helvetia', arial, sans-serif; font-size: 16px; line-height: 1.2rem; padding: 0 17%;
}
.left{ float: left;
}
.right{ float: right;
}
h2{ font-size: 1.5em; font-weight: bold;
}
h3{ font-size: 1.2em; font-style: italic;
}
.pic{ border: 4px solid #f3f3f3; box-shadow: 0 0 3px #666; display: inline; margin: 0 2% 2%; width: 30%;
}
.pic img{ width: 100%;
}
section{ background: #eee; margin: 0 auto; padding: 2% 3%; width: 100%;
}
article{ border-bottom: 2px dashed #aaa; display: block;
}
@media all and (max-width: 890px){ body{ padding: 0; }
}
@media all and (max-width: 480px){ body { padding: 0; } .pic{ border: 0; box-shadow: none; display: block; float: none; margin: 0; width: 100%; } .pic:before{ border: 1px solid #bbb; color: #666; content: "View Image"; display: block; font-style: italic; font-weight: bold; margin: 0; padding: 4px 14px; text-align: center; width: 100%; } .pic.hidden:before{ display: none; } .pic.show:before{ display: block; } .pic:hover{ cursor: pointer; } .pic img{ display: none; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <article> <h2>Abe Vigoda is Still Alive</h2> <p>Twee retro godard craft beer, farm-to-table helvetica cred photo booth vegan echo park stumptown trust fund. Whatever readymade butcher hella master cleanse brunch. Thundercats four loko helvetica vinyl lo-fi organic, fingerstache DIY wolf gluten-free williamsburg. Mustache fixie kale chips fap brooklyn 8-bit. Locavore readymade synth, etsy photo booth narwhal gastropub cred lomo salvia tofu trust fund DIY ethical. Gastropub lo-fi narwhal.</p> <div class="pic left"> <img src="http://wac.450f.edgecastcdn.net/80450F/bigfrog104.com/files/2012/01/abe-vigoda.jpg" title="Abe Vigoda 01" class="vigoda"/> </div> <h3>VHS Bicycle Rights Cardigan</h3> <p>Cosby sweater DIY chillwave carles mustache. Iphone small batch cardigan thundercats wolf, quinoa direct trade post-ironic ethical brunch put a bird on it art party gastropub trust fund banksy. Gentrify high life banh mi, direct trade PBR blog mixtape. Fixie small batch keffiyeh pour-over, high life craft beer bespoke wes anderson photo booth art party sustainable. Cray salvia small batch, blog messenger bag lo-fi craft beer quinoa mumblecore. Keffiyeh odd future high life art party lomo, terry richardson cray.</p> <p>8-bit lo-fi keffiyeh cardigan biodiesel, hella ennui gastropub ethical farm-to-table wolf bicycle rights forage irony photo booth. Williamsburg chambray etsy gastropub craft beer freegan.</p> <p>Organic mcsweeney's high life pork belly next level, you probably haven't heard of them shoreditch fanny pack swag authentic pitchfork art party. Vinyl master cleanse narwhal cosby sweater, you probably haven't heard of them irony whatever skateboard tumblr swag 8-bit DIY. Chambray occupy.</p> <p>Pitchfork chillwave Austin bicycle rights, freegan hoodie cray scenester. Shoreditch pitchfork beard banksy typewriter, fixie vice carles organic. Gentrify bespoke occupy forage trust fund polaroid. Salvia keytar leggings wolf portland four loko. Keffiyeh odd future high life art party lomo, terry richardson cray. Beard thundercats etsy next level iphone terry richardson echo park brunch mustache. Gluten-free brunch skateboard ethical.</p> <div class="pic right"> <img src="http://www.newsfromme.com/archives/images14/abevigoda.jpg" title="Abe Vigoda 02" class="right vigoda"/> </div> <p>Organic mcsweeney's high life pork belly next level, you probably haven't heard of them shoreditch fanny pack swag authentic pitchfork art party. Vinyl master cleanse narwhal cosby sweater, you probably haven't heard of them irony whatever skateboard tumblr swag 8-bit DIY. Chambray occupy pour-over kale chips banksy, semiotics ethnic helvetica keytar lo-fi lomo. Fanny pack kogi pop-up echo park. Next level iphone twee seitan. Salvia blog skateboard, sriracha you probably haven't heard of them vinyl sartorial marfa keffiyeh umami typewriter fanny pack squid PBR.</p> <p>Cosby sweater DIY chillwave carles mustache. Iphone small batch cardigan thundercats wolf, quinoa direct trade post-ironic ethical brunch put a bird on it art party gastropub trust fund banksy. Gentrify high life banh mi, direct trade PBR blog mixtape. Fixie small batch keffiyeh pour-over, high life craft beer bespoke wes anderson photo booth art party sustainable. Cray salvia small batch, blog messenger bag lo-fi craft beer quinoa mumblecore. Keffiyeh odd future high life art party lomo, terry richardson cray.</p> </article> <article> <h2>Abe Vigoda is not Dead</h2> <div class="pic right"> <img src="http://blog.blockbuster.com/wp-content/uploads/2011/02/abe_vigoda.jpg" title="Abe Vigoda 03" class="right vigoda"/> </div> <p>Skateboard cardigan flexitarian four loko gastropub irony vinyl, ethical pour-over street art DIY mustache quinoa mumblecore biodiesel. Fixie truffaut hoodie marfa ethical forage. Vinyl raw denim truffaut pitchfork, fixie photo booth forage whatever mustache carles ethnic iphone. Authentic kogi 3 wolf moon truffaut. Gluten-free vinyl mixtape, leggings forage chillwave next level banh mi terry richardson fanny pack semiotics helvetica. Food truck fingerstache farm-to-table dreamcatcher cray lo-fi sartorial, godard hella. Typewriter biodiesel echo park truffaut jean shorts.</p> <h3>Gluten-free PBR High Life, Chambray McSweeney's</h3> <p>Stumptown lomo organic swag. Mixtape shoreditch flexitarian vinyl single-origin coffee PBR. Tofu bushwick banh mi beard. Farm-to-table vegan portland, tattooed single-origin coffee truffaut vice pinterest craft beer four loko DIY next level Austin godard. 8-bit leggings before they sold out street art terry richardson, selvage mlkshk DIY messenger bag. PBR gluten-free high life, butcher chambray mcsweeney's lo-fi lomo four loko keytar semiotics direct trade DIY. DIY fanny pack stumptown banh mi wes anderson banksy.</p> <p>Fixie wolf authentic readymade salvia DIY. Yr forage wolf, mlkshk fixie beard odd future gentrify. Ennui +1 lomo, twee next level irony blog chillwave dreamcatcher. Brooklyn pour-over synth iphone, DIY retro mustache typewriter single-origin coffee occupy godard williamsburg readymade. 8-bit bushwick master cleanse bicycle rights.</p> </article>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Content Experiment - Script Codes CSS Codes

*, *:after, *:before{ box-sizing: border-box;
}
body{ color: #333; font-family: 'Helvetica Neue', 'Helvetia', arial, sans-serif; font-size: 16px; line-height: 1.2rem; padding: 0 17%;
}
.left{ float: left;
}
.right{ float: right;
}
h2{ font-size: 1.5em; font-weight: bold;
}
h3{ font-size: 1.2em; font-style: italic;
}
.pic{ border: 4px solid #f3f3f3; box-shadow: 0 0 3px #666; display: inline; margin: 0 2% 2%; width: 30%;
}
.pic img{ width: 100%;
}
section{ background: #eee; margin: 0 auto; padding: 2% 3%; width: 100%;
}
article{ border-bottom: 2px dashed #aaa; display: block;
}
@media all and (max-width: 890px){ body{ padding: 0; }
}
@media all and (max-width: 480px){ body { padding: 0; } .pic{ border: 0; box-shadow: none; display: block; float: none; margin: 0; width: 100%; } .pic:before{ border: 1px solid #bbb; color: #666; content: "View Image"; display: block; font-style: italic; font-weight: bold; margin: 0; padding: 4px 14px; text-align: center; width: 100%; } .pic.hidden:before{ display: none; } .pic.show:before{ display: block; } .pic:hover{ cursor: pointer; } .pic img{ display: none; }
}

Responsive Content Experiment - Script Codes JS Codes

$('.pic').click(function(){ $(this).find('img').show(); $(this).addClass('hidden');
});
$('.pic img').click(function(){ $(this).closest('div').removeClass('hidden').addClass('show');
});
// still working on the hide image after opening them
Responsive Content Experiment - Script Codes
Responsive Content Experiment - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 3
Size 4,586 Kb
Views 28,336
Do you need developer help for Responsive Content Experiment?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick Cox (pcridesagain) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!