i have a jcarousel gallery of images
but the jcarousel is not working at all it's not scrolling through images at all
this is my code :
<ul id="mycarousel" class="jcarousel-skin-tango">
<?php foreach ($images as $image_item) : ?>
<li><img src="<?php echo $image_item['Path']; ?>"/></li>
<?php endforeach; ?>
</ul>
and this is my css :
.jcarousel-skin-tango .jcarousel-container {
width:500px;
height:250px;
background: none;
border: none;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
height:250px;
padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 500px;
height: 250px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 500px;
height: 250px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
and there is my js :
$(document).ready(function(){
$('#mycarousel').jcarousel({wrap:'circular'});
});
Your code is almost correct — you just need to add "auto: 1" (or some other non-zero number of seconds) and it'll start auto-scrolling. If you don't want auto-scroll, you need to specify the "buttonNextHTML" and "buttonPrevHTML" parameters to get buttons.
Related
I am creating a social site and I want to leave three menu dots on the top right corner of each individual post a user makes. But it only works on one post. They show up on all of the posts but when I click it, the dropdown content only shows on the very first post at the top of the page.
I put it in my posts loop so I don't see why it's not working.
$str .= "<div class='status_post'>
<div class='post_profile_pic'>
<img src='$profile_pic' width='50'>
</div>
<!-- three dot menu -->
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown()'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id='myDropdown' class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
<div class='posted_by' style='color:#ACACAC;'>
<a href='$added_by'> $username </a> $user_to $time_message
$delete_button
</div>
<div id='post_body'>
$body
<br>
$imageDiv
<br>
<br>
</div>
<div class='newsfeedPostOptions' onClick='javascript:toggle$id(event)'>
Comments($comments_check_num)
<iframe src='like.php?post_id=$id' scrolling='no'></iframe>
</div>
</div>
<div class='post_comment' id='toggleComment$id' style='display:none;'>
<iframe src='comment_frame.php?post_id=$id' id='comment_iframe' frameborder='0'></iframe>
</div>
<hr>";
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
color:#000 !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #000;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropdownbtn {
position: absolute;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
margin-top: 6%;
margin-right: 30%;
}
.dropdownPosts {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdownPost-content {
display: none;
position: absolute;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdownPost-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownPosts a:hover {background-color: #f1f1f1}
.show {display:block;}
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdownbtn')) {
var dropdowns = document.getElementsByClassName("dropdownPost-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
If you remove any duplicated IDs from the HTML and modify the 3-dots portion like so
<div class='dropdownPosts'>
<!-- three dots -->
<ul class='dropdownbtn icons btn-right showLeft' onclick='showDropdown(event)'>
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div class='dropdownPost-content'>
<a href='#home'>Home</a>
<a href='#about'>About</a>
<a href='#contact'>Contact</a>
</div>
</div>
You can then likey modify your showDropdown function like this:
function showDropdown(event) {
event.target.nextElementSibling.classList.toggle("show");
}
I am by far not an expert with PHP, and could really use some help creating my logo below into a H1. This is in my body section of the site:
<!--logo-->
<div class="logo" style="float:left;">
<?php echo $html->link($html->image('rental_logo.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
</div>
<div class="logo" style="float: right; margin-right: 470px; padding-top: 40px;">
Here is what I tried to create the above logo into a H1 tag:
<h1>
<a href="<?php echo $html->link($html->image('rental_logonew.png')?>" title="http://example.net/img/rental_logo.png"><br/>
<img src="<?php (http://example.net/img/rental_logonew.png);>/images/rental_logo.png" alt="vacation rentals" title="logo"
</h1>
I am very inexperienced writing code. So, I know the above that I tried to enter is wrong. Should I also be altering my look.css file?
/* css */
#logo {
background: transparent url("http://example.net/img/rental_logo.png") no-repeat scroll 0% 0%;
float: left;
/*width: 200px;*/
padding-bottom:10px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
I am attempting to add "rendered html" as requested. This may be incorrect, because I am unfamiliar with rendered html. I obtained the above codes from my header.ctp and look.css files.
($html->image('rental_logonew.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
Thanks for looking, and helping if you can.
In the php code i dont see where you close the "a" tag, just follow the structure bellow. I hope it will work.
CSS:
#logo {
width: 344px;
height: 82px;
margin-top: 10px;
/*float: left;*/
background: url(../images/logo.png) no-repeat;
}
h1.logo {
width:344px;
height:82px;
margin:0;
padding:0;
}
h1.logo a {
display: block;
height: 82px;
text-indent: -3000em;
overflow: hidden;
}
HTML:
<div id="logo"><h1 class="logo" title="logo"><a title="logo" href="/">Logo</a></h1></div>
Demo here..
I have a css menu which has a width of 400 for non-Admins... and a width of 500 for Admins. If I set the UL width to 500, the menu centers fine and nicely for Admins. But for non-admins, whose mneu is really only 400 wide... it's off-kilter.
So I removed the width attribute from the UL to try and remove this and then it lost centering altogether; the whole menu is now stuck to the left side of the container.
Anyone have a simple idea for how to make it always centered? Site is here:
http://www.runic-paradise.com/
ul.menu{
height: 40px;
list-style: none outside none;
margin: 0 auto;
/*width: 500px;*/
}
/*li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}*/
a.menu{
color:#FFF;
text-decoration:none;
}
p.menu{
padding-top: 10px;
padding-right: 5px;
padding-left: 5px;
}
.subtext{
padding-top: 10px;
}
ul.menu li{
width: 100px;
height: 40px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
/*Menu Color Classes*/
.green{
background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}
.yellow{
background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}
.red{
background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}
.purple{
background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}
.blue{
background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}
<ul class="menu">
<li class="green">
<p class="menu">Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p class="menu">-</p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p class="menu">Forums</p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p class="menu">-</p>
<p class="subtext">Send us your stuff!</p>
</li>
<?php
if ($user->data['group_id'] == 5)
{
echo ' <li class="purple">
<p class="menu">Admin</p><p class="subtext">Legal things</p>
</li>';
}
?>
</ul>
Your CSS sets the ul.menu width to 400px. If the user is admin, the php script adds another 100px wide li to ul.menu. When this happens, you have to set the ul.menu width to 500px. If you do this, the css rule margin:0px auto; will handle the centering as expected.
A simple jQuery fix would be something like this:
<script>
$(document).ready(function() {
var menu=$('ul.menu');
if(menu.find('li')>4) {
//if there are more then 4 menu items, reset menu width to 500px
menu.css('width','500px');
}
});
</script>
Use max-width:500px;for UL.Demo for these http://jsfiddle.net/dhanith/ZMB93/
Can you please try this,
In animated-menu.css (demo url: http://www.runic-paradise.com/), Change margin style as like below
ul.menu {
height: 40px;
list-style: none outside none;
margin: auto 25%;
}
I am trying to implement Rotate3Di, found here: http://www.zachstronaut.com/projects/rotate3di/
I can get my images to flip, but the back side is only showing a mirror image of the front and not unique content that I am pulling from a database. Thanks for any help in advance.
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
$('#movienav li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
}
);
});
</script>
HTML
<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>
CSS
#movienav {
height: 450px;
width:75%;
float:left;
margin-top:25px;
clear:left;
padding-bottom: 45px;
}
#movienav li {
width: 340px;
height: 450px;
float: left;
margin-right: 10px;
position: relative;
display:inline;
list-style:none;
}
#movienav li div {
width: 340px;
height: 450px;
overflow: hidden;
background: #161616;
position: absolute;
top: 0;
left: 0;
}
#movienav li div.back {
left: -999em;
padding-bottom: 15px;
background-color:#161616; /*max-height:450px; overflow:auto;*/
margin-top: 0;
}
SOLVED
Changed above lines to:
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
}
);
http://davidwalsh.name/css-flip
I think you want backface-visibility: hidden;
I'll be honest I've only done this via CSS and not with javascript, but I had the same issue at first until I set the backface-visibility. Doing everything via javascript might require some extra magic.
I have an advent/christmas calendar. Everyday is another picture with one more door opened. To make these regions clickable I used CSS and IDs like this:
CSS:
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregionsli {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
#door2 {
left: 135px;
top: 192px;
width: 73px;
height: 116px;
}
HTML:
<ul id="doorregions">
<li id="door1">
<span><a href="<?php echo($december1); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
<li id="door2">
<span><a href="<?php echo($december2); ?>">
<img src="blankpixel.gif" width="100%" height="100%">
</a></span></li>
</ul>
So far all works fine. Now an image should, on rollover, show a door near the mouse cursor while it is over the region. I tried something like:
#door1 a:hover {
display:block;
background-image: url(OTHERPICTURE1.jpg);
}
But this method doesn't work if the other picture is bigger than the door region. Any other idea? I can't slice the background image, that is not an option.
It's not necessary to follow the mouse in the region, the position can be fixed. But this second image should only apear while the mouse is over the door (or maybe on the second picture).
The BEST solution would be something like this: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
But in this case it is the same picuture which zooms in. I have only blank gifs. What will be the smartest idea?
If you are willing to use jQuery, you could create a hidden div for each "door". Then, bind a hover event to the a tag and set the visibility of the div to true. Like such:
$("li #door1 a").hover(function () {
$("div #door1image", this).fadeIn("fast");
}, function () {
$("div #door1image", this).fadeOut("fast");
});
The "door1image" is id of the div that would be hidden from the start (display:none). It could be placed inside the li with the a tag for each door.
Code is not tested and may not be perfect, but hopefully you get the idea.
What about setting the door divs to position: relative then do an absolutely positioned div with negative bottom and rightplacement example:
#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25;
Right:-25;
Display:none;
}
Then use javascript to change the display property back to normal.
Hope this helps.
I haven't been able to get fades or animation to work like I want it to, but here is how I would make the popup images. Note: that instead of using a blank image, the image should be the image you want to display on hovering.
CSS
ul#doorregions {
list-style: none;
background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
position: relative;
width: 950px;
height: 575px;
margin: 0;
padding: 0;
}
ul#doorregions li {
border: 0px ;
position: absolute;
}
#door1 {
left: 135px;
top: 192px;
}
#door2 {
left: 225px;
top: 192px;
}
.doors {
background: #444;
width: 73px;
height: 116px;
}
.popup {
position: absolute;
top: 0;
left: -99999px;
border: 0px;
z-index: 9;
}
HTML
<ul id="doorregions">
<li id="door1" class="doors">
<span><a href="<?php echo($december1); ?>">
<img class="popup" src="<?php echo($december1Image); ?>">
</a></span>
</li>
<li id="door2" class="doors">
<span><a href="<?php echo($december2); ?>">
<img class="popup" src="<?php echo($december2Image); ?>">
</a></span>
</li>
</ul>
Script
// using window.load to ensure all images are loaded
$(window).load(function(){
$('.doors').each(function(){
var popup = $(this).find('.popup');
// find middle of door
var doorY = $(this).height()/2;
var doorX = $(this).width()/2;
// position middle of popup to middle of door
var popY = doorY - popup.height()/2;
var popX = doorX - popup.width()/2;
popup
.hide()
.css({top: popY, left: popX });
$(this).hover(function(){
popup.show();
},function(){
popup.hide();
})
})
})
I'm not entirely sure of what you're needing, but the following code duplicates the functionality of the "Fancy Thumbnail" link you provided. Hopefully it will help!
<!DOCTYPE html>
<style>
ul {
list-style: none;
margin: 50px;
padding: 0;
}
li {
width: 300px;
height: 300px;
float: left;
border: 3px outset gray;
background: white;
}
li:hover {
margin: -50px;
width: 400px;
height: 400px;
z-index: 2;
position: relative;
}
</style>
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>