I have created the divs and containers for some 'suggested items' at the bottom of this page im working on, would like it to be a slider where you click left and right to see more. But all jQuery sliders i've seen only work for images only (carousels), is there ones people could recommend for to me for this situation as it's not just images.
I presumed I cannot have DIV's inside of UL elements as that's what all the sliders I've seen use.
Here is my html for that slider area below. And a link to the page: http://bit.ly/18IOB8J
<div id="carousel-left"><img src="http://placehold.it/20x100" /></div>
<div id="suggestedproducts">
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" />
</div>
<div id="suggestedproduct-desc">
<h5>JCB 650W ELECTRIC JIGSAW</h5>
<p>£ 59.99</p>
</div>
</div>
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<div id="suggestedproduct-img">
<img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" />
</div>
</div>
<div id="suggestedproduct-desc">
<h5>JCB 650W ELECTRIC JIGSAW</h5>
<p>£ 59.99</p>
</div>
</div>
<div id="suggestedproduct-container">
<div id="suggestedproduct-img">
<img src="http://acsupply.mangdevelopment.co.uk/upload/category/5_FixingsHardwareSecurity.jpg" />
</div>
<div id="suggestedproduct-desc">
<h5>JCB 650W ELECTRIC JIGSAW</h5>
<p>£ 59.99</p>
</div>
</div><!-- suggestedproduct-container -->
<div id="carousel-right"><img src="http://placehold.it/20x100" /></div>
I found Basic Slider to be one of the best and easiest slider scripts to integrate out there. Very light weight, has all the needed options:
It can slide images and or HTML content
It's responsive
Offers nice keyboard, mouse and scroll wheel controls
Very easy to integrate and customize
Fade or slide transitions
Timing options, control display options, ...
It replaced all other slider scripts I was using because it's very easy to integrate and customize and very light-weight and for bonus offers nice fade effect.
There are MANY jQuery sliders supporting all kind's of content. One of them I've used many times is http://tympanus.net/Development/CircularContentCarousel/
Source and tutorial can be found at http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
Related
I'm using Wordpress 5.2.2 with Newspress Extend theme as the parent.
I restored the default settings of the theme in Appearance --> Newspress Options in an attempt to fix something unrelated, and lost the custom html/inline css that floated the advertisements, one left and one right to be sandwiching the logo. Oops. I tried to guess the replacement code based on my very limited knowledge of html/css and it's rendering them above not only the logo, but the top menu as well. I know this change can be done in this section because I'm just trying to restore it to what it was from the previous developer. Help would be greatly appreciated.
Appearance --> Newspress Options --> General Options --> Custom code within Head area (all pages)
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;">
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;">
custom css screenshot
logo screenshot in Newspress theme's custom interface
page in question
Your ads are sitting outside of the container div. They're actually sitting above the site's metatags at the moment. CSS is a powerful tool, but it shouldn't be used to over-correct or mask improper HTML structure. You need to stuff your ads into their respective divs.
This is how your HTML should look, specifically for your header div:
<div id="header">
<div id="header-content">
<!-- Site Titele and Description Goes Here -->
<div class="topadlft"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
<img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1>
<h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>
<div class="topadrt"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
</div><!-- header-content -->
<div class="heading-date">Friday, October 4, 2019</div>
</div>
You will also want to turn off the "display:none;" selectors in your CSS file for the "topadlft" and "topadrt" classes. Also remove the inline styles from each ad image. You're going to want the div classes that contain the ads to do the heavy lifting here. Inline styles will just cause further complications.
Once you've addressed the above, you should wind up with something that looks like this:
Fixed Header Image
I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:
<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>
I want a gap between the end of the form and the top of the image, but col-md-6 seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with col-md-6 removed.
Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?
Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.
Check this link about Bootstrap Grid System
I'm building a web app with meteor. Right now, I'm trying to create this web page containing two templates.
Basic design layouts:
First template: This template includes the Left Menu Bar (4 tabs).
Next is what it looks like after adding the 2nd template (purple).
What I want to do is to switch templates in the purple area for the 4 tabs, while keeping the rest layout. I'm using bootstrap to set the layout. However, when I try to resize the window to a smaller one:
issue 1. the green and purple parts will stack on each other.
issue 2. After I set a top padding to move the purple area down, when I scroll down, there is still a part where these two templates will stack on each other.
What would be the best approach here?
Here are my codes:
<template name="layout">
{{header}}
{{> Template.dynamic template=template1}}
{{> Template.dynamic template=purpleTemplate2}}
{{> footer}}
</template>
Inside first template:
<div>
<div class="col-xs-12 col-md-3" >
//content - four tabs
</div>
<div class="col-xs-12 col-md-9">
</div>
</div>
Inside second template:
<div id="tab1">
<div class="col-xs-12 col-md-3" >
</div>
<div class="col-xs-12 col-md-9">
//tab 1 content
</div>
</div>
same as ...tab2 ...tab3 ...tab4
I hope this makes sense. I'll be glad to provide you with more details if needed. Thank you in advance for your help!!
JUST ADDED:
Ideally, it should look like this when I resize the browser:
However, it looks like this:
The left menu bar stays on top, which is what I want. But when I scroll down the purple area will scroll up and cover the menu. Also, the footer seems to stay with the purple area as well.
We can start by setting up wrappers to the dynamic templates. like this:
<div class="col-xs-12 col-md-3" >
{{> Template.dynamic template=template1}}
</div>
<div class="col-xs-12 col-md-9">
{{> Template.dynamic template=purpleTemplate2}}
</div>
This means you probably not need the bootstrap cols inside your dynamic html.
heres an example I whipped up:
http://codepen.io/nilestanner/pen/PGwAXL
I'm working on a website based on the Foundation library. I'm creating an About "page" on my website by using a modal, and attempting to equalize the three different panes inside of the modal, like so:
<div id="aboutPage" class="reveal-modal" data-reveal>
<h1>About</h1>
<div class="row" data-equalizer>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>About This Site</h2>
<p>This site is intended to provide a resource for people learning to program in Swift.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>What's Coming Up</h2>
<p>We're working on smoothing over some glitches with the brand new Issue tracking systems. We also have some exciting updates planned involving this site's mobile version.</p>
</div>
<div class="large-4 columns panel" data-equalizer-watch>
<h2>Using the Help Menu</h2>
<p>The Help menu quickly lets you contact Support to address issues which may present themselves as you program in Swift. If a representative is not available when you submit your question, we will address your issue as soon as possible. You will
receive a notification badge when the issue has been resolved.</p>
</div>
</div>
<a class="close-reveal-modal" id="x">×</a>
</div>
However, when I viewed the modal, the panels were not equalized. This was also true on several other modals on which I attempted to do the same thing. Despite that, I was able to successfully equalize the panels outside of the modal. Is this a bug/feature related to the modal, and if so, is there any way around it?
Once you have your Reveal Modal opened you will need to recalculate the height of the Equalizer panels.
// Once the Reveal Modal has been opened . . .
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
// Force Foundation to recalculate the Equalizer panel heights
Foundation.libs.equalizer.reflow();
});
Here is a working example in codepen.
I hope that helps.
In Foundation 6, I was having the same issue. Here is the solution that ultimately worked for me.
<script>
$(document).foundation();
$('.reveal').on('open.zf.reveal', function() {
//force equalizer to fire AFTER modal has finished opening
Foundation.reInit('equalizer');
});
</script>
I changed my grid system to bootstrap and I'm finding out that its not static. It seems to adjust to the screen size when the span's are specific sizes. I did not want to remove responsive.css file to see if it works. I've seen several sites built using this system and some are static. My question is how do I do this?
<div class="container">
<div class="span3">Logo Placement</div>
<div class="span4 offset4">Weather Modal</div>
<div class="span12">Nav placement 940px</div>
<div class="span12">imageslider placement</div>
<div class="row">
<div class="span12">
<div class="span4">sidebar placement</div>
<div class="span6">body content placement</div>
</div>
</div>
</div>
It doesn't center, and it seems to shrink based on the browser. I do not know what values to use or what to change.
Just uncheck the "responsive layouts" before you generate and download your code on the bootstrap website. That should make it so your website has a static grid.