|
JavaScript - Featured Content Slider Adjustments...?
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 --> Similar TutorialsHi 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 Hello 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. 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! I am looking for a slider. Can anybody help me? This is the design of the slider. Hi there, There appears to be some sort of distortion issue with the slider on my client's website. The website is www.tranzaura.com and for some reason some of the slides on the home page appear distorted when viewed in some browsers. See attached image. Can you please check the website on your computer and please let me know if there is distortion. I'd appreciate if you could vote in the poll. Note that there are 9 slides. You can scroll through them if you wish. I have no idea why this is happening. Any thoughts or advice would be appreciated. Thank you ANy programmer can help me to insert this slider script into my website? http://sorgalla.com/projects/jcarous..._vertical.html im using interspire shopping cart. advance thanks I use offshore coding service, which failed with superior PSD to WP conversion with basic JS Slider. I know the task is complex, but do not want to hire superficial coders any more. What software can completely replace freelancers to create excellent JS Slider on WordPress engine?
Hi All members i need helping in creating content slider look like this; http://wpclassipress.com/demo/ note; I ask for creating slider look like this (Thumbnail imge and Title under it) plz any tips to do that, My new WP site depends on this part...plz help I have a question, How do you create a slider for a website? I am not familiar with anything but html and css, but I would like to create a simple image slider for my site. How would I go about doing that? Any help is appreciated Thanks 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 every one I'm looking for a numeric slider , some thing that I define the min and max numbers . the attached file is something that I want . Any suggest ? thanks So I have this timeline that runs from 1991 to 2011, and it's broken into two parts. What I want to happen is when a user clicks the links to each section the slider will respond. This is an example of how I want it to function: http://www.stevenserna.com/test2 And after some modification and implementation this is what I have so far(the links to change the timeline are in the top left): http://www.stevenserna.com/test It seems like the second section doesn't want come up and stay next to the first section and instead stays below it. If you increase the height of the mask in the style file you can see the second section hanging out below. This kind of seems more like a CSS issue but I thought I would post it in here since has to do with a javascript based slider. Any help would be awesome! Thanks! Hi. I'm trying to make a news slider for a website in js. This is what I currently have: Code: <script type="text/javascript">
var refresh = setInterval("refresh()", 5000);
function refresh()
{
$('#top_news').load('top_ten.php').fadeIn("slow");
}
</script>
The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text). ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news. Thanks I would like to change the variable of an object with a slider. For example, I have an object with variable zoom, how would I add a slider function to the script to change this variable? I am a little confused about event handling. Any help would be much appreciated. I am posting the code (which actually was done by one of this forum's members) in case it may make understanding/explanation simpler. Code: <!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.tstparent {
position:relative;overflow:hidden;left:50px;top:50px;width:800px;height:500px;border:solid red 1px;
}
#tst {
position:relative;left:0px;top:0px;width:700px;height:500px;
}
.window {
width:200px;height:150px;border:solid white 2px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
function zxcZoomImage(o){
var img = document.getElementById(o.ID);
var obj = img.parentNode;
var window = document.createElement('DIV');
var zimg = document.createElement('IMG');
var src = o.ZoomSRC;
var zoom = o.Zoom;
zoom = typeof(zoom)=='number'?zoom:2;
var os=o.ZoomWindowOffset;
window.style.position = 'absolute';
window.style.overflow = 'hidden';
window.style.visibility = 'hidden';
window.style.zIndex= '2' ;
window.className = o.WindowClassName;
zimg.style.position = 'absolute';
zimg.style.width = img.width*zoom+'px';
zimg.style.height = img.height*zoom+'px';
zimg.src = typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window = window;
this.zimg = zimg;
this.wh = [obj.offsetWidth,obj.offsetHeight];
this.zoom = zoom;
this.os = typeof(os)=='object'&& os.constructor==Array && typeof(os[0])=='number'&& typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
this.wos = [-(zoom-1)*window.offsetWidth/2,-(zoom-1)*window.offsetHeight/2]; // to center the zoom on the pointer
this.addevt(document,'mousemove','imgzoom',obj);
}
zxcZoomImage.prototype={
imgzoom:function(e,obj){
var mse=this.mse(e);
var pos=this.pos(obj);
var x=mse[0]-pos[0];
var y=mse[1]-pos[1];
var wh=this.wh;
var os=this.os;
var wos=this.wos;
var window=this.window;
var zimg=this.zimg;
var zoom=this.zoom;
if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
x+=os[0];
y+=os[1];
window.style.left=x+'px';
window.style.top=y+'px';
zimg.style.left=-x*zoom+wos[0]+'px';
zimg.style.top=-y*zoom+wos[1]+'px';
window.style.visibility='visible';
}
else {
window.style.visibility='hidden';
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener)
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if
(o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
} // end of prototype declarations
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:4, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'scia_no2_trop_2009.gif', //(optional) the file path and name of the zoom image.
//... (string, default = the src of the image to zoom)
ZoomWindowOffset:[-100,-75] //(optional) the zoom window x and y offsets from the mouse position.
//... (array, default = centered on the mouse position)
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<noscript>
<!-- <meta http-equiv="refresh" content="0;url=index2.htm;" /> -->
<b>Your browser does not support JavaScript or it is disabled. <br>
Please enable JavaScript to be able to zoom the map. </b>
</noscript>
<div class="tstparent" >
<img id="tst" src="scia_no2_trop_2009.gif" alt="img" />
</div>
</body>
</html>
Hi i am very new to javascript. i want the slider type effect where i can show some images. Please see here in this site www.indiabazaaronline.com i want this kind of slider effect. Plzz any body help me. Thx in advance Hey all, Was just wondering if anyone knew what type of content slider is this http://www.builtbybuffalo.com/ and were could i get one? Thanks in advance Kyle I made a sliding drop down menu and I am having a couple issues. #1) The image that i use as a separator in my nav bar slides down with the slide menu, I would like to try and make that stay in place without sliding with the drop down and sliding back up with the collapse. #2) The very top line in every drop down is not aligning correctly. After the first line the rest of the <li> content below it aligns just fine to the left. Is there something with the very top line of a drop down menu that needs its own styling? Any help is appreciated. Hey What do I need to do, for this to work both ways without all the bugs? http://kaspernordkvist.dk/slider/ Thanks |
|||||||