Page is here https://coloradophotographyschool.com/tvimages.php
Using jssor slider for images for different size. Now the transitions are gone, it just blanks out between slides. I've set $SlideshowOptions, and propagated _SlideshowTransitions, but nothing.
Can anyone see where I've broken something in the page source?
Please remove background-color: black; from your page.
In other words, replace
<style>
html, body, div, img {
margin: 0;
padding: 0;
background-color: black;
}
</style>
with
<style>
html, body, div, img {
margin: 0;
padding: 0;
}
</style>
Related
I've looked and looked for what should be a simple answer, and for some reason I can't find it.
I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.
When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.
You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.
I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.
Please use class name to define css for slider1_container.
.slider1_container {
position: relative;
width: 960px;
height: 628px;
/*border: 20px solid #E1D9CC;*/
overflow: hidden;
/*margin: 90px auto 0;*/
margin: 0 auto;
padding-bottom: 0;
}
And remove the following codes,
#media only screen and ( max-width: 1152px ) {
.slider1_container {
max-width: 92%;
border-width: 15px;
}
}
#media only screen and ( max-width: 800px ) {
.slider1_container {
margin-top: 10px;
border-width: 10px;
max-width: 90%;
}
}
#media only screen and ( max-width: 640px ) {
.slider1_container {
border-width: 5px;
}
}
And also, jssor.js is missing in your code. Please replace
<script src="../js/jssor.slider.js" type="text/javascript"></script>
with
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
Edit
<div id="slider1_container" class="slider1_container" ...
Move thumbnails
Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
Reference:
http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
http://www.jssor.com/development/reference-ui-definition.html
I want to make a responsive site that has an image with links you can click.
This site has invisible divs that sync up with the picture even as the image scales and resizes with the browser.
I want to first try to do the same thing with an image, and then I want to try it with a video.
Are they using any scss or javasript to make that happen, or are they just using css and html?
You can do it using just CSS and HTML, I've made a quick JSFiddle with a full size image background and a little nav.
As with the links you make the text on the image, then create a div ontop of them, don't set a background and just use a border until you get them in the correct place.
https://jsfiddle.net/2mow8qhv/2/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="bgHeader"></header>
<nav id="topNav">
Description | Gallery | Map |
Comments
</nav>
<div id="pageWrapper">
<div id="description">
<body>
</html>
/* Set all padding and margins to 0 by default, and colour to a grey unless overwritten*/
*{
padding: 0px;
margin: 0;
color: #333;
}
/* HEADER AND NAVIGATION*/
/* Sets a background image to fill 100% of the screen and fixes it in place*/
header#bgHeader{
background-image:url("http://seattlebubble.com/blog/wp-content/uploads/2014/11/Weyerhaeuser-Mansion_Tacoma.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
position:absolute;
width:100%;
height:100%;
}
/* Sets the navigation menu to the bottom of the page, and layered above the image*/
nav#topNav{
height: 60px;
width: 100%;
position: absolute;
bottom: 0px;
font-size: 1.5em;
line-height: 55px;
z-index: 2;
background: #000;
opacity: 0.7;
text-align: center;
}#topNav a{
text-decoration: none;
color: #FFF;
}#topNav a:hover{
color: #CCC;
}
http://itshappeninghere.com/mobile/explorer.php
Pulling up the page above in a browser will show that the list items for the menus at the top and bottom (collapsed by default), fill the viewport.
Pull up the same page on an ipod touch or iphone, the list items won't fill the viewport on portrait (there is a small gap on the right), but on landscape the page looks fine.
Is there anyway to fix this or is it just a quirk of css rendering?
Here's the CSS for the list items.
ul#m_nav li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
.mobile #filters ul li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
I think it is due to CSS rendering and the percentage-based widths that you're using. Webkit might be rounding it off differently than you intend - these things sometimes crop up.
Instead of floats with a percentage based width, could you try table display properties:
#filters ul {
width: 100%;
margin: 0;
padding: 0;
display:table;
}
#filters ul li {
padding: 0;
margin: 0;
display: table-cell;
height: 10px;
}
Check out this JS fiddle to see what it does.
My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
I'm referring to this link here: sortable
I want to make these items inline, and I've changed the display of the
#sortable1 li, #sortable2 li
to
display:inline;
in the css, but then all gets scrambled and my items fly off to the right, even though I have div wrapper set which is 500px - they fly out of that area.
Has anyone some good tips to handle this?
Thank you.
Try changing your css to:
#sortable1, #sortable2 {
margin: 0 10px 0 0;
padding: 0;
}
#sortable1 li, #sortable2 li {
display: inline;
font-size: 1.2em;
margin: 0 5px 5px;
padding: 5px;
width: 120px;
}