Jump to content

pleek

Members
  • Posts

    135
  • Joined

  • Last visited

Posts posted by pleek

  1. 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?

  2. 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

     

  3. 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.

  4. 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?

  5. 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.

  6. 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;
    }
    

    post-55659-13482403159426_thumb.png

  7. 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

  8. 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

  9. 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>
    

  10. 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>";

  11. 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]

  12. Well, let's just agree that we will disagree then...

     

    However, if you are going to write the javascript using PHP echo's, why are you using single quote marks to echo the code and then having to exit out of quote marks to append the variables. Just use double quotes and include the variable inside the quote marks. Much more efficient and easier to read I think

    //Single quotes
    echo 'This car is ' . $color . ' and gets ' . $mpg;
    //Double quotes - easier to read
    echo "This car is $color and gets $mpg";

     

    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.

  13. 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!

  14. 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?

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.