|
JavaScript - Content Slider Problem In Ie7
Hi I have created this page http://kylehouston.com/new/ were I have added a content slider in the main banner then another in the footer, these work fine in ff but ie7 doesnt seem to agree instead giving me an error, how do i get around this?
Thanks in advance! Kyle Similar TutorialsHello Guru's, I hope someone can help me with the following. I have a div on a page, with content (images, text), I want to rescale it by using a slider. I have this code sample which allows to rescale, rotate, skew, but I only want to use the rescale option, and use it with a slider instead of using the small magnifying glass icon on the right bottom corner. I've have add the files as attachment and hope someone can help me with this. Thanks. Hey everyone, I'm designing a website via blogger for a university group. I'm using a content slider visible at http://BUQuidditch.blogspot.com. The photos I've placed into it do NOT fit correctly and I wasn't sure if there was a way to adjust code to fit the images into the place... Can you help? Here's the code for the slider-- <!-- Featured Content Slider Started --> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, delay: 7000, slideInfoZoneOpacity: 0.8, showCarousel: false, slideInfoZoneSlide: false }); } window.addEvent('domready', startGallery); </script> <div class='fullbox_excerpt'> <div class='fullbox_content'> <div class='smooth_gallery'> <div id='myGallery'> <div class='imageElement'> <h3>Terrier Pride</h3> <p>Boston University is no newcomer to high-level quidditch. Check out our World Cup squad in the links above.</p> <a class='open' href='SLIDER-1-URL-HERE' title='This is featured post 1'/> <img alt='' class='full' src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash2/165339_188260047858531_188258957858640_619170_4520108_n.jpg'/> </div> <div class='imageElement'> <h3>Born Champions</h3> <p>Boston University Quidditch took home first place at the 2011 Northeast Regionals and will look to defend their title next spring season.</p> <a class='open' href='SLIDER-2-URL-HERE' title='This is featured post 2'/> <img alt='' class='full' src='http://hphotos-sjc1.fbcdn.net/267626_234350186582850_188258957858640_919787_4234070_n.jpg'/> </div> <div class='imageElement'> <h3>Be a Part of the Family</h3> <p>Aside from big competition, BUQ also runs a inter-BU league made of "Houses." We're open to anyone and everyone and we accept new players every week. Join the team and get sorted onto your House Team!</p> <a class='open' href='SLIDER-3-URL-HERE' title='This is featured post 3'/> <img alt='' class='full' src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc6/190610_197965160221353_188258957858640_690485_8288227_n.jpg'/> </div> <div class='imageElement'> <h3>It Takes Passion to be this Dedicated</h3> <p>The quidditch team plays year round, come sun, rain, sleet and snow. Be prepared for action in all weather!</p> <a class='open' href='SLIDER-4-URL-HERE' title='This is featured post 4'/> <img alt='' class='full' src='http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/270642_234322573252278_188258957858640_919452_2590551_n.jpg'/> </div> </div></div></div></div></b:if></b:if> <!-- Featured Content Slider End --> Hello! I've been working with the Zurbs Foundation grid recently and they included a very nifty slider that works wonderfully, it has a lot of really neat support to it However when I implemented it the javascript is going back and resizing the height of the "content" div container that came stock with the slider. All of the code I'm using is 100% stock from Foundation, I'm working on a blank template at the moment in the javascript it edits the width & height to a height and width of 1px, so that if there is no content it will collapse. this is what that looks like below: Code: c=f.wrap('<div class="orbit-wrapper" />').parent();f.add(h).width("1px").height("1px")
So I edited the width to include Code: .width("auto")
I did this for the height as well, but it wasn't altering it so i gave it Code: .height("450px !important")
(i usually don't use 'important', but i felt like I might be able to blow it out of the water and force it to be 450px tall). When I go to inspect the element it tells me that the height is 450px with an important tag attached to it, however there is still something overriding it Code: element.style{
height:468px;
}
the element.style means that a javascript file is the one that is overriding the current style. I'm struggling to find exactly where this is being called from. Any help would be greatly appreciated. Thanks! EDIT: Resolved! by adding Code: #featured a{height:450px;}
to the css, it will fix the height (not fluid, but you can also do height:auto; and it will also work fine Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi, I cant get the following to work... help would be very much appreciated, thank you. I also have it uploaded on pagemaster.co.za/_test/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>Test Slider</title> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body onLoad="slideA()"> <div id="container"> <img src="images/img1.jpg" id="imgslide" /> <div id="left_holder"><img onClick="slide(-1)" class="left" src="images/arrow-left.png" /></div> <div id="right_holder"><img onClick="slide(1)" class="right" src="images/arrow-right.png" /></div> </div> <script type="text/javascript" src="test.js"></script> </body> </html> #container { height: 360px; width: 960px; margin: 20px auto; position: relative } #imgslide { height: 360px; width: 960px; position: absolute } #left_holder { height: 360px; width: 100px; position: absolute; left: 0px; top: 0px; } #right_holder { height: 360px; width: 100px; position: absolute; right: 0px; top: 0px; } .left { height: 48px; width: 48px; position: absolute; top: 40%; left: 0px; } .right { height: 48px; width: 48px; position: absolute; top: 40%; right: 0px; } and the js... var imagecount = 1; var total = 8; function slide(x) { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + x; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; } window.setInterval(function slideA() { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + 1; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; }, 5000); if you look on my website here you will see a slider on the front page. works fine on all browsers except for internet explorer. on IE, when each picture scrolls, the page will scroll itself down to the bottom. also, after about 4 pictures are scrolled, the slider stops and is just a white box for the rest of the time. does anyone have any ideas??? thanks (if you check the validator it says something about not understanding the value "allowTransparency") thanks again! Hi, I have been playing with Slidersjs and have it sliding through my images just fine, however the previous/next and slide identifiers below the images don't seem to work and I can't see how to make them active. The temp link is he http://mono-zine.com/Mono.LogDM.html and the slide is the second one down. The identifiers should be clickable to take you to a specific slide, whilst they do change they dont click. Any help gratefully received. The script is from he http://slidesjs.com/ Cheers Hi All I'm new here. I'm not a javascript coder but I can copy/paste and follow instructions. I'm using easyslider1.7 which is based on jquery. I have it set up and it's working. The problem I'm having with it is when I refresh the page or go to a different page on my site the slide images seem to "spill" out of the slider and it takes a second or so for the images to get back into position. I see this same slider on other sites and this problem doesn't happen. I've tried giving the container div a fixed height but that didn't help. Does anyone know what might cause this and what I should look for? thanks marloo I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png hi all, I have a very serious problem with the coda-slider (I guess you know the coda-slider). I have 5 panels with lots of content, I have a panel buttons and DropDownLists. When I click one of this buttons or dropdownlist, the javascript function that calls the coda-slider is lost and does not work. Any ideas? thanks... Hi, i would like to explain my situation, basically, i am trying to create a slider with thumbnails. The slider is complete, works very well. The only problem is that the captions are just not appearing properly. I had a situation where the captions did work but they had to be coming in from the slideOut functions but what i want is for it to be displayed when the person hovers over the image. This is what it looks like at the moment... This is when the caption is coming from the top. i would like to implement Code: http://web.enavu.com/demos/caption/ or this Code: http://www.sohtanaka.com/web-design/examples/image-hover/ Doesnt matter which one into my slider when an image is hovered over (not the thumbnail) the actual image, then the caption covers the whole image displaying whatever text... Coding: (HTML) Code: <div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#">
<img style="height:534px;" src="http://i55.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(253); ?>">
<img src="http://i51.tinypic.com/.jpg" alt="" />
</a>
<a href="<?php echo get_permalink(256); ?>">
<img src="http://i52.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(258); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
<a href="<?php echo get_permalink(271); ?>">
<img src="http://i53.tinypic.com/.png" alt="" />
</a>
</div>
<div class="descriptions">
<!--welcome page-->
<div class="desc">
<strong style="font-size:30px;">Welcome to City Water</strong>
<div class="clear"></div><br/>
<div id="sliderdescription">WHATEVER WHATEVER</div>
</div>
<!--Services page-->
<div class="desc">
<?php $post_id = 253; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong>
<div class="clear"></div><br/>
<div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Products page-->
<?php $post_id = 256; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Information page-->
<?php $post_id = 258; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
<div class="desc">
<!--Accounts page-->
<?php $post_id = 271; $queried_post = get_post($post_id); ?>
<strong style="font-size:30px;"><?php echo $queried_post->post_title; ?></strong><div class="clear"></div>
<br/><div id="sliderdescription"><?php echo $queried_post->post_content; ?></div>
</div>
</div>
</div>
<div id="hrline"></div>
<div class="paging">
<ul class="thumb">
<li><a href="#" rel="1"><img src="http://i55.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="2"><img src="http://i56.tinypic.com/.jpg" class="thumbnails"/></a></li>
<li><a href="#" rel="3"><img src="http://i51.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="4"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
<li><a href="#" rel="5"><img src="http://i52.tinypic.com/.png" class="thumbnails"/></a></li>
</ul>
</div>
</div>
CSS Code: /*--Main Container--*/
.main_view {
float : left;
height :488px;
margin-bottom :1px;
margin-top :-40px;
position :relative;
}
/*--Window/Masking Styles--*/
.window img{
height :492px;
width : 974px;
}
.window {
/*--Hides anything outside of the set width/height--*/
border :3px solid #D7D7D5;
color : #B4B4B4;
font-size : 12px;
font-weight : bold;
height :488px;
overflow : hidden;
position : relative;
width : 974px;
}
.image_reel {
left : 0;
position : absolute;
top : 0;
}
.image_reel img {
float : left;
}
.image_reel ul li {
display : inline;
}
#image_reel .caption {
background-color :#000;
bottom :0;
color :#ffffff;
height :100px;
position :absolute;
width :100%;
z-index :600;
}
#image_reel .caption .content {
}
#image_reel .caption .content h3 {
color :#1DCCEF;
margin :0;
padding :0;
}
/*--Paging Styles--*/
.paging {
/*--Assures the paging stays on the top layer--*/
/*--Hidden by default, will be later shown with jQuery--*/
bottom : -25px;
display : none;
line-height : 40px;
position : absolute;
right : -70px;
text-align : center;
z-index : 100;
}
.desc {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 101;
margin-top:275px;
color: white;
font-size: 2em;
padding: 7px;
}
JAVASCRIPT Code: $(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
hideComment();
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
showComment();
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
play = null;
}, function() {
rotateSwitch(); //Resume rotation
});
showComment = function(){
// slide toggle effect set to slow you can set it to fast too.
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).show(700);
return true;
};
showComment(); // Show Comment initially
hideComment = function(){
$(".desc").stop(true,true).slideUp(500).hide();
};
//hide comment if you click on it
$(".desc").click(function(){
hideComment();
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#imgSlides {
display: none;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript">
var img = [];
img[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
img[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
img[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
img[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};
for (var imgs=[], i=0; i<img.length; i++){
imgs[i] = new Image();
imgs[i].src = img[i].src;
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==1) ? 0 : 1 ;
}
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
document.getElementById("autoPic").onclick = function(){
dirn = (dirn==-1) ? 0 : -1 ;
}
dirn = -1;
setTimeout(fade,1000);
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (++curPic > img.length-1) ? 0 : curPic;
imgSlider.src = img[curPic].src;
}
function prevImage(){
document.getElementById("prevImage").onclick = function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac += opacStep * dirn;
if (curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
fade();
return;
}
if (curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
document.getElementById("prevImage").onclick = function(){setTimeout(fade,1000);}
return;
}
if (imgSlider.style.opacity=="string"){
imgSlider.style.opacity = curOpac/10;
}
else {
imgSlider.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
imgSlider.style.MozOpacity = curOpac/10;
}
}
function swapImage(){
curPic = (--curPic < 0)? img.length-1 : curPic;
imgSlider.src = img[curPic].src;
}
}
window.onload = function(){
imgSlider = document.getElementById('imgSlides');
imgSlider.src = img[curPic].src;
imgSlider.style.display = 'inline';
document.getElementById("autoPic").onclick = fade;
prevImage();
}
</script>
</head>
<body>
<img id="imgSlides" src="" alt="" />
<br />
<a id="prevImage" href="#">PREV</a>
<a id="autoPic" href="#" title="Play / Pause">AUTO</a>
</body>
</html>
I've taken reference of this code from this forum and altered it a bit to achieve the effect that an image will be changed once the prev button is pressed. Image by image fading works well in IE8 (press the button once, the image is changed once; when pressed again, it changes again; step by step) But in Firefox 4, it just auto fades into another image. I tried to debug it in the Firefox console but due to my lack of knowledge in JS, I could not find the root of the problem. Can anyone explain a bit why it works in IE but not in Firefox? /** The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH <div id="gallery-menu"> <?php foreach ($galleries as $gallery) : ?> <a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?> <?php endforeach ?> </div> <?php foreach ($galleries as $gallery): ?> <div id="<?= $gallery['gallery']['id'] ?>" class="gallery"> <div class="slider" style="width; 100%; height: 100%;"> <ul> <?php foreach ($gallery['images'] as $image): ?> <li class="galleries-container"> <img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" /> </li> <?php endforeach; ?> </ul> </div> </div> <?php endforeach; ?> // javascript // function showGallery(galleryId) { ????!?!?!?!?! } Hello, I am having some issues with some of my content being displayed on my website in my 'works' section. In particular the images, which i have double checked to make sure the names match, and the iframe video does not load at all. I have an incline this may be related to a javascript problem. Here is the code: Edit fiddle - JSFiddle Any help would be much appreciated, thank you. Reply With Quote 02-03-2015, 10:29 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts You are using jQuery but you aren't including your choice of the version of jQuery you want to use in that jsFiddle. But we can't easily debug in jsFiddle. Can't you show us the page live, on your site? And in any case, you have no images nor video on that fiddle, so why are you asking us about them? Here's how I mucked with your fiddle: Edit fiddle - JSFiddle Hello there, new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one. I have two scripts. one is for TinyMCE (WYZIWYG editor): Code: tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
function setup() {
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
content_css : '/CSS/TinyMCE.css',
theme_advanced_styles : "Test style=header1;",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
});
}
first part loads tinymce when it's there on the page, second part loads it when a button is pushed. second script is for loading filecontent into a div: Code: function load_this(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
req.onreadystatechange = targetDiv;
try {
req.open("GET", url, true);
} catch (e) {
alert(e);
}
req.send(null);
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = targetDiv;
req.open("GET", url, true);
req.send();
}
}
}
function targetDiv() {
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
document.getElementById("main").innerHTML = req.responseText;
} else {
alert("Problem: " + req.statusText);
}
}
}
now the problem: I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working: Code: function load_editor(url) {
load_this(url);
setup();
}
where url=editor.php. The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working! This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work. my question: How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this? Or is there some other way I can do this? Kind regards and many thanks for your help! Kevin Resolved
Hello, As the title states, I have a problem with a function that hides content contained in DIV tags. Here is the function: Code: <script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
Now, the function itself works perfectly. The problem that I have is that it doesn't work the way I need it to. I have 4 links that need to show the content of a corresponding DIV section. When a link is clicked I need it to check the state of the other 3 DIVs and hide any that are open, then display the content for the link that was clicked. I can tell from the function I am using that it already checks the state of any 1 given DIV then acts accordingly (shows if hidden, hides if shown). While this works, I am having a hard time figuring out how to modify it to suit my needs. I am completely new to JavaScript but I do know some VB so I am not a stranger to programming in general. What I would like is some direction on how to modify the above function to handle the logic I need. I would prefer instruction on how I should go about it so I can get some experience, but any help is appreciated. Thanks! PS, I am setting the display property of all 4 DIVs to NONE by default via embedded CSS. Ok, i have a javascript that creates a table then appends it to an empty div. This works fine in FF, however it fails to work in IE8. [edit] I have decided to post the entire code since I wasn't having any luck getting any suggestions. Maybe now someone can help me out. Code: function createTable() {
var machine = document.Catalog.machine.value;
var dSearch = document.Catalog.dSearch.value;
var section = document.Catalog.section.value;
var x = xmlDoc.getElementsByTagName('record');
var y = xmlDoc.getElementsByTagName('data');
var newEl = document.createElement('TABLE');
newEl.className = 'resultsTab';
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR');
var n = 1;
var headings = new Array("Col1", "Col2", "Col3", "Col4", "Col5");
var dcount = 0;
//for (t=0;t<10;t++) {
for (t=0;t<y[0].childNodes.length;t++) {
if (y[0].childNodes[t].tagName == "record") { // it is required for FF to work properly
dcount++;
}
}
if (document.Catalog.thumbImg[0].checked) {
var container = document.createElement('TH');
var theData = document.createTextNode("Pic");
container.className = "topline1";
container.appendChild(theData);
row.appendChild(container);
}
for (h=0;h<headings.length;h++) {
var container = document.createElement('TH');
var theData = document.createTextNode(headings[h]);
container.className = 'topline' + n;
container.appendChild(theData);
row.appendChild(container);
n++;
}
tmp.appendChild(row);
switch (searchtype) {
case 1:
var objRegex = new RegExp(machine);
break;
case 2:
var objRegex = new RegExp(section, "i");
break;
case 3:
var objRegex = new RegExp(dSearch, "i");
break;
default:
document.getElementById("replaceTxt").innerHTML = "<p>There was an error processing your request.</p>";
}
var rowColor = 1;
var noResult = "false";
for (i=0;i<dcount;i++) {
var row = document.createElement('TR');
var searcharr = new Array();
for (j=0;j<x[i].childNodes.length;j++) {
if (x[i].childNodes[j].nodeType != 1) continue;
searcharr.push(x[i].childNodes[j].firstChild.nodeValue);
}
var searchstrg = searcharr.toString();
if (searchstrg.match(objRegex)) {
var t;
var m=1;
if (document.Catalog.thumbImg[0].checked) {
var pn = "images/"+searcharr[2]+".jpg";
var container = document.createElement('TD');
var refLink = document.createElement("A");
refLink.setAttribute('href', "javascript:viewImg(\""+pn+"\")");
var imgHolder = document.createElement("IMG");
imgHolder.setAttribute("src", pn);
imgHolder.style.height = "75px";
refLink.appendChild(imgHolder);
container.appendChild(refLink);
container.className = "img"+rowColor;
row.appendChild(container);
}
for (t=0; t<searcharr.length; t++) {
container = document.createElement('TD');
var theData = document.createTextNode(searcharr[t]);
container.appendChild(theData);
container.className = 'line' + rowColor + '_' + m;
row.appendChild(container);
m++;
}
tmp.appendChild(row);
rowColor == 1 ? rowColor++ : rowColor--;
document.getElementById("replaceTxt").innerHTML = "";
document.getElementById("replaceTxt").appendChild(newEl);
noResult = "true";
}
}
if (noResult=="false") {
document.getElementById("replaceTxt").innerHTML = "<h3>Sorry, there was no match to your search. Please try again</h3>";
}
}
xmlDoc is the xml object from my import xml function. it is working correctly. IE does not give any JS errors, it just does nothing. If I put text in the Code: document.getElementById("replaceTxt").innerHTML
field, IE displays the text in the correct spot so I know the code is working. I also verified the data is being written correctly to "newEl" via IE 8 debugger. IE just does not want to append the newEl child to the <div> tag. This is where I assume the problem is. |
|||||||