pleek

mssakib, I believe your wordpress stylesheet is adding a padding to the images. Since you're images have a class of image_sha try adding the following code .image_sha { padding:0px; } Could supply a link to your wordpress page so I can look at the styling?

Hello, I'm working on styling a wordpress plugin and its going great till something weird happened. I had a title and a span hidden with display:none but then I wanted to display one of the spans. I selected the spans class and set it to display:block; Nothing happened. I removed the display:none style but still nothing happened. I opened up firebug and noticed this. http://fundamentaldesigns.org/wp-content/uploads/user_uploads/pleek91/firebug.JPG I completely deleted the style that is showing up three times in that screenshot. Cleared my cache and cookies, hit ctr +f5, everything I can think of but it still shows up that way and the span is still hidden. Any ideas whats going on? Thanks

Okay I tried to do the same technique using jQuery to animate the opacity. $('div.four').hover(function(){ $(this).find('p').animate({opacity:'1'},{queue:false,duration:500}); }, function(){ $(this).find('p').animate({opacity:'0'},{queue:false,duration:500}); }); The animation is nice and smooth but I still get the same unfocused bug with all the text. Any other suggestions? It seems that any animation of the opacity while content is rotated produces this problem.

Okay thats what I figured. Okay second question, can you steer me in the right direction on how to change the css attributes of an object responsively (currently the effects are triggered by :hover) and achieve the same animation i'm currently using CSS3 transitions for? Thanks for your help Mahngiel

I'm having a problem using opacity transitions on anything that is rotated using CSS3. I have a div rotated -20 degrees and three paragraphs that transform from margin-left:50px; opacity:0; to margin-left:0px; opacity:1; This works fine on its own but when I put it inside the div that is rotated -20 degrees it produces a weird focusing effect when the transition is triggered. This only happens when I try to transition the opacity level. CodePen - http://codepen.io/anon/full/uhCLn In Chrome the transitions work great, but in firefox its like the text goes out of focus then refocus when the transition is complete. Is there anyway to fix this or is this another CSS compatibility issue?

nevermind, not sure what i did but it works now. Thanks for your help!

Ahhh knew it was something simple, now they layer correctly but any controls (links) i add to the slideshow div won't work. I added a link to on of the "li"s and i can't click on it. <li><a href="#"><img src="slide1.jpg" width="800" height="312" alt="Sea turtle" /></a></li> any suggestions? I want each image in the slideshow to be a link to take the user to a new page about that image.

First thing i see is this isn't php so not sure why ur files is header.php. Are you trying to include header.php in the "header" div?. Also looking at your code your html is not complete. you have several tags without closing tags. Example <div id="container"> has no closing </div> tag. Need to learn the basics of html before you try to use javascript and php.

I have a page that uses z-index to layer divs to create a wrap around effect with a ribbon. I also have a slideshow that the banner is supposed to be on top of at the top so it looks like the image below (attachment 1). The problem is even if i change the z-index of "banner" to "100000" the slideshow still shows up on top of it. Any help would be appreciated. HTML <DIV CLASS="main"> <DIV CLASS="banner"></DIV> <div CLASS="slideshow" id="slideshow"> <ul id="slides"> <li><img src="slide1.jpg" width="800" height="312" alt="Sea turtle" /></li> <li><img src="slide2.jpg" width="800" height="312" alt="Coral Reef" /></li> </ul> </div> </DIV> CSS .banner { margin:0 auto; width:900px; height:130px; background:url(banner.png) no-repeat top left; z-index:3; } .slideshow { margin-top:-75px; width:800px; height:312px; z-index:2; }

Anybody?

I have this code to get the contents of an external html file and display it on the current page... <script type="text/javascript"> function HttpRequest(url){ var pageRequest = false //variable to hold ajax object /*@cc_on @if (@_jscript_version >= 5) try { pageRequest = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try { pageRequest = new ActiveXObject("Microsoft.XMLHTTP") } catch (e2){ pageRequest = false } } @end @*/ if (!pageRequest && typeof XMLHttpRequest != 'undefined') pageRequest = new XMLHttpRequest() if (pageRequest){ //if pageRequest is not false pageRequest.open('GET', url, false) //get page synchronously pageRequest.send(null) embedpage(pageRequest) } } function embedpage(request){ //if viewing page offline or the document was successfully retrieved online (status code=2000) if (window.location.href.indexOf("http")==-1 || request.status==200) document.write(request.responseText) } HttpRequest("getfrom.html") </script> This is the external html page <HTML> <HEAD> </HEAD> <BODY> <P>hello there!</P> <P id="upcoming">upcoming text</P> </BODY> </HTML> I need the current page to only retrieve the contents of the "upcoming" paragraph. Iv been fooling around with it but can't seem to figure it out. Any ideas? thanx

Ok, all I want is a play button that plays a mp3 when you click it and then turns into a pause or stop button. Iv been googling for the last hour and have come up with nothing that seems to work well with multiple instances of the player. I need something with a main script and then i can insert a line of code with the desired mp3 where i want the play button to show. I have a list of mp3s on my page and i want the user to be able to preview each one. Thanks

I found this site. http://www.linkrr.com/ I want my script to be able to do that, i know its possible i just can't figure out how. even a link in the right direction would be good. thanks...

This will be for personal use only so thats not a problem

Okay I've been googling around and can't figure out how to do this. I want a form that I can copy a list of raw urls and hit a button and they'll all be opened in a new tab. Example: URLs pasted into form Then I hit submit and the three links open in new tabs. Thanks in advanced for any help/advice you can offer.

I've google'd round the web and i can't seem to find a freeware script that i can add mp3's to and people can log in and listen to them in a online radio. I just need a simple page that plays the mp3, and shows the track name, genre, and artist. Anybody know of such a script?

well i did a little research and by setting variables for the selection menus the script now works in FF. But i still can't get it to work in IE. Heres the new script. <SCRIPT TYPE='text/javascript'> function Change(options) { var Card = document.getElementById('CardChooser'); var BG = document.getElementById('BGChooser'); var Font = document.getElementById('FontChooser'); var newSrc; newSrc = 'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCard'; newSrc += Card.options[Card.selectedIndex].value; newSrc += '/index.php'; newSrc += '?UserName=$UserName'; newSrc += '&Posts=$UserPosts'; newSrc += '&PS=$PersonalText'; newSrc += '&Site=$Website'; newSrc += '&Av=$UserAvatar'; newSrc += '&Group=$Group'; newSrc += '&BG=' + BG.options[bG.selectedIndex].value; newSrc += '&Font=' + Font.options[Font.selectedIndex].value; document.getElementById('Card').src = newSrc; document.getElementById('Options').style.visibility = options; document.getElementById('Font').style.visibility = options; } </SCRIPT>

anybody got any ideas?

it says "CardChooser is not defined". But clicking on "Card One" should define it. I attached the Generator.template.php file that the error is from. [attachment deleted by admin]

Ok, so im making an image creator/generator for my forum. And i started out using firefox to view it in but after a while i change to chrome for speed reasons. So i added like 3 new features and then today i was using firefox and it doesn't work now and I'm not sure why. It works correctly unless the user clicks on "Card Two". In Chrome the image (Card) changes and the options come up. But in firefox and IE nothing happens. Can someone take a look at my source pages and show me how to make it cross browser compatible? Generator.template.php is the smf custom page where the problem is. If i copy the url of the created image from chrome and put it in FF it shows up so i know its part of the template page. The feature i added is the onclick script that changes the src of the image and shows/hides the options div. Im quite sure its a problem with the DOM thats making it not work. Here is that part. <SCRIPT TYPE='text/javascript'> function Change(options) { var newSrc; newSrc = 'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCard'; newSrc += CardChooser.options[CardChooser.selectedIndex].value; newSrc += '/index.php'; newSrc += '?UserName=$UserName'; newSrc += '&Posts=$UserPosts'; newSrc += '&PS=$PersonalText'; newSrc += '&Site=$Website'; newSrc += '&Av=$UserAvatar'; newSrc += '&Group=$Group'; newSrc += '&BG=' + BGChooser.options[bGChooser.selectedIndex].value; newSrc += '&Font=' + FontChooser.options[FontChooser.selectedIndex].value; document.getElementById('Card').src = newSrc; document.getElementById('Options').style.visibility = options; document.getElementById('Font').style.visibility = options; } </SCRIPT>";

Ok, so im making an image creator/generator for my forum. And i started out using firefox to view it in but after a while i change to chrome for speed reasons. So i added like 3 new features and then today i was using firefox and it doesn't work now and I'm not sure why. It works correctly unless the user clicks on "Card Two". In Chrome the image (Card) changes and the options come up. But in firefox and IE nothing happens. Can someone take a look at my source pages and show me how to make it cross browser compatible? Generator.template.php is the smf custom page where the problem is. If i copy the url of the created image from chrome and put it in FF it shows up so i know its part of the template page. The feature i added is the onclick script that changes the src of the image and shows/hides the options div. Im quite sure its a problem with the DOM thats making it not work. Here is that part. <SCRIPT TYPE='text/javascript'> function Change(options) { var newSrc; newSrc = 'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCard'; newSrc += CardChooser.options[CardChooser.selectedIndex].value; newSrc += '/index.php'; newSrc += '?UserName=$UserName'; newSrc += '&Posts=$UserPosts'; newSrc += '&PS=$PersonalText'; newSrc += '&Site=$Website'; newSrc += '&Av=$UserAvatar'; newSrc += '&Group=$Group'; newSrc += '&BG=' + BGChooser.options[bGChooser.selectedIndex].value; newSrc += '&Font=' + FontChooser.options[FontChooser.selectedIndex].value; document.getElementById('Card').src = newSrc; document.getElementById('Options').style.visibility = options; document.getElementById('Font').style.visibility = options; } </SCRIPT>"; [attachment deleted by admin]

thank you for pointing that out, i had forgotten that double quotes work that way which makes the javascript part much easier. I was using single quotes because of all the html, which i didn't want to escape all the double quotes in my html code. Also your idea to use javascript visibility to show my html help me so much. Now my code is 100% working! I really appreciate your time and explaining things. People like you is why this forum is the best one out there like it.

my syntac for the javascript is fine, it works as long as i don't change the onchange() handler to onchange(this, 'Card'). As soon as i do that it doesn't work. And as i said your code works perfectly, and the way i recoded it is actually the correct way of inserting php variables into html, at least thats how i've been tought. addint <?PHP tags to every part of the php code is very time consuming and if your code is mostly php you would spend hours just writing that code. As for the rawurlencode() i don't disagree with it and i will probably add it back in later, but for the sake of simplicity i removed it. Just because your personal syntac style doesn't match mine doesn't make either of our syntac wrong . As for your suggestion to change the Change 1 & 2 functions to hide/show i agree and thanks for pointing that out. innerhtml was just the first thing i thought of to do what i needed it to. I will try that and i think that might solve my problem. I thank you for your help, it is very appreciated!

ok, this code (your code) works great by itself... <?php $UserName = "MJones"; $UserPosts = "25"; $PersonalText = "TheText"; $Website = "www.domain.com"; $UserAvatar = "MyAvatar"; $Group = "TheGroup"; echo' <html> <head> <script type="text/javascript"> function changeimg(selObj, targetID) { //Generate the background source URL var newSrc; newSrc = \'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCardTwo/index.php\'; newSrc += \'?UserName=' .$UserName. '\'; newSrc += \'&Posts=' .$UserPosts. '\'; newSrc += \'&PS=' .$PersonalText. '\'; newSrc += \'&Site=' .$Website. '\'; newSrc += \'&Av=' .$UserAvatar. '\' newSrc += \'&Group=' .$Group. '\' newSrc += \'&BG=\' + selObj.options[selObj.selectedIndex].value; //Set the target source //document.getElementById(targetID).src = newSrc; document.getElementById(targetID).innerHTML = newSrc; return; } </script> </head> <body> <SELECT NAME="BG" ID="BGChooser" onchange="changeimg(this, \'Card\');"> <OPTION VALUE="0">Choose a Background...</OPTION> <OPTION VALUE="0">None</OPTION> <OPTION VALUE="1">Little Big Planet</OPTION> <OPTION>Other Background</OPTION> </SELECT> <DIV id="Card"></DIV> </body> </html>'; but when i insert it into my page, when i click on "Card Two" it doesn't change the "Card" src and it doesn't change the innerhtml of "Options" either. Here's the html.... (Yes its enclosed in php) <select name="CardSelection" multiple size="5"> <option onclick="Change1()">Card One <option onclick="Change2()">Card Two </select> <td ID="Options" valign="top"> <hr> <BR> <DIV ALIGN="center"> <img ID="Card" src="http://craigh.tlcrepair.net/ConsoleCard/ConsoleCardOne/index.php? UserName=' .ucwords($UserName). '&Posts=' .$UserPosts. '&PS=' .$PersonalText. '&Site=' .$Website. '&Av=' .$UserAvatar. '&Group=' .$Group. '"> </DIV> And here is the javascript... <SCRIPT TYPE="text/javascript"> function Change2() { document.getElementById(\'Card\').src=\'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCardTwo/index.php?UserName=' .$UserName. '&Posts=' .$UserPosts. '&PS=' .$PersonalText. '&Site=' .$Website. '&Av=' .$UserAvatar. '&Group=' .$Group. '\'; document.getElementById(\'Options\').innerHTML=\' <SELECT NAME="BG" ID="BGChooser" onchange="changeimg(this, \'Card\');"> <OPTION VALUE="0">Choose a Background...</OPTION> <OPTION VALUE="0">None</OPTION> <OPTION VALUE="1">Little Big Planet</OPTION> <OPTION>Other Background</OPTION> </SELECT>\'; } function Change1() { document.getElementById(\'Card\').src=\'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCardOne/index.php?UserName=' .$UserName. '&Posts=' .$UserPosts. '&PS=' .$PersonalText. '&Site=' .$Website. '&Av=' .$UserAvatar. '&Group=' .$Group. '\'; document.getElementById(\'Options\').innerHTML=\'\'; } function changeimg(selObj, targetID) { //Generate the background source URL var newSrc; newSrc = \'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCardTwo/index.php\'; newSrc += \'?UserName=' .$UserName. '\'; newSrc += \'&Posts=' .$UserPosts. '\'; newSrc += \'&PS=' .$PersonalText. '\'; newSrc += \'&Site=' .$Website. '\'; newSrc += \'&Av=' .$UserAvatar. '\' newSrc += \'&Group=' .$Group. '\' newSrc += \'&BG=\' + selObj.options[selObj.selectedIndex].value; //Set the target source document.getElementById(targetID).src = newSrc; return; } </SCRIPT> Now javascript:change1() and javascript:change2() both worked before adding your code to the innerHTML. So im not sure what part of it is stopping it from working. See any errors or problems?

well by "it didn't work right" i meant it didn't do anything, worked as good as the nonworking code i posted. I'll try your updated script and get back to you with the results. Thanks for the help.