Need help? Check out our Support site, then


custom CSS list and zoom display widget runs fine on jsfiddle but not WP

  1. I wrote a new nav widget using only CSS and WP-allowed HTML.

    It runs fine on JSFiddle.

    See:
    http://jsfiddle.net/alibey/7ftkbh1q/

    I even put it through CSS Lint to get rid of an nigglies.
    And yet...

    When I ported it to WP (I have the CSS upgrade)... it had a problem with the HTML tag "img"

    http://needlepointlandstore.wordpress.com/whimsy-and-grace-hat-bands/

    I would appreciate it any WP gurus and / or volunteers could help me fix the code such that it runs on this platform. I think the code is correct, but I'm obviously missing some crucial thing.

    one thing I did notice is the WP text editor change my HTML code from this

    ...
    <div id="canvas-type" >
    <img src="https://needlepointlandstore.files.wordpress.com/2014/08/navigator_hat-band-icon1.png" alt="Needlepoint" title="Navigator: hat band"</img>

    to this

    ...

    <div id="canvas-type"><img src="https://needlepointlandstore.files.wordpress.com/2014/08/navigator_hat-band-icon1.png" alt="Needlepoint" title="Navigator: hat band"</div>

    not sure what this "<" represents, but I am assuming it is some kind of internal escape character that the interpreter used to flag html tags

    at any rate, the forum search box choked on it, so i have no idea what it actually does.

    Any help would be most appreciated.

    The blog I need help with is needlepointlandstore.wordpress.com.

  2. Please post the ENTIRE code for the widget here between CODE tags so we can examine it.

  3. you can see it on the jsfiddle link. here is what the program look like when i run it on my desktop. it works with all three browsers I test -- I no longer bother testing for IE. on wp, i obviously just spliced into the css and text page sections, while getting rid of <head> and <style> and <body> delimiters.

    the code looks better (more readable) on jsfiddle. I'm not sure if WP preserves the readability tabs and formatting of the actual program here. at any rate, here goes:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>Navigator V 1.0</title>
    
    		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    
    		<style>
    
    		.Navigator {
    			background-color:#FFFF99;
    			width: 600px;
    			height: 400px;
    			overflow: auto;
    			position: relative;
      			margin: auto;
    
    		}
    
    		.nCanvas_display_area {
    
    			width: 473px;
    			height: 300px;
    			margin: auto;
      			position: relative;
    			margin-left:  12%;
    
    		}	
    
    		.nCanvas {
    			position: static;
    
    			font-family: "Raleway";
    			background-color:#CCFFCC;
    			width:150px;
    			height: 150px;
    			border: 1px solid green;
      			line-height: 150px;
      			text-align: center;
    			overflow: hidden;
    		}
    
    		.nCanvas:hover {
        			width: 453px;
    		}
    
    		img {
    			display: inline-block;
       			height: 100%;
        			vertical-align: middle;
    			max-height: 40px;
    
    		}
    
    		#canvas-type {
    			float: right;
    
    		}
    
    	</style>
    	</head>
    
    	<body>
    
    		<div class="Navigator">
    
    			<div id="canvas-type" >
    				<img src="https://needlepointlandstore.files.wordpress.com/2014/08/navigator_hat-band-icon1.png" alt="Needlepoint" title="Navigator: hat band"</img>
    
    			</div>
    
    			<div class="nCanvas_display_area">
    
    				<div class="nCanvas"> 
    
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11472.jpg" title="wg112472 $99 12" x 2" 18m" alt="Needlepoint"</img>
    
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11513.jpg" title="wg112513" alt="Needlepoint"</img>
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11512.jpg" title="wg112512" alt="Needlepoint"</img>.
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11516.jpg" title="wg112516" alt="Needlepoint";</img>.
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11517.jpg" title="wg112517" alt="Needlepoint";</img>
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11518.jpg" title="wg112518" alt="Needlepoint";</img>
    				</div>
    
    				<div class="nCanvas">
    					<img src="https://needlepointlandstore.files.wordpress.com/2014/08/wg11521.jpg" title="wg112521" alt="Needlepoint";</img>
    				</div>
    
    			</div>
    
    		</div>
    
    	</body>
    
    </html>
  4. by the way this project started as a result of a bug in Pictorico's handling of 2-column and 3 column galleries (this was the missing cell problem that was flagged to the dev / maintenance group, which i am sure they will get to eventually, but i have a store open / official launch in a month, so could not actually wait till the bug was fixed whenever.)

    as a result, i decided to code my own solution. if the reason that img is not displaying correctly can be found and fixed, then i will improve the widget as follows:

    1) enable textual descriptions to be associated with each nCanvas element. (version 2). Just adding text between the <div> marks does not work. something more sophisticated is needed. The title attribute is of course limited in width, so I cannot stick the info the viewer needs to see there.

    2) add rounded tabs to the of the widget. This would allow the user to display by canvases by retail line (ie, by image type). nCanvas will have to be modified/generalized to accommodate various sizes of images, instead of just the current default.

    3) the hat icon on the top right will be replaced with each designer's logo. clicking on the icon would bring up a clickable list of designer logos, so the widget could then be used to navigate this entire site visually.

    and that would be pretty neat, if I may so myself! and the actually widget would then become the powerful image navigation app I envision, which I am calling Navigator. In my wildest dreams, I wish I could access Google code for image search! That would be totally cool, because users could (theoretically) then look for similar images. Of course the Google image search does have quite a few problem of its own ;-)

    but first things first: why is the WP interpreter not liking the <IMG> tag in my code?

  5. my IMG declaration is affecting all the other images in my blog. I have to remove the height attribute. Does WP support scoped HTML declarations?

  6. I tested inline scoping on my desktop using all 3 major browser and it worked just fined

    I removed the img declaration in the CSS style section WP for this widget
    then added the scoping to the HTML code as follows

    <div class="Navigator">

    <style scoped>
    img {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-height: 40px;

    }
    </style>

    the scoped styling was actually stripped by the WP preprocessor, even though this is legal HTML5 code (unless I am mistaken), and is treated as such by Safari, Mozilla, and Chrome (I never test for IE). Because of the stripping the result was gibberish in WP -- although, as I said, it worked just fine in Mozilla et al. when I tested the code. Scoping fixed the problem of impacting other images in the blog, while restricting the change I need to the nav widget only. This is how it should be done, and is of course standard in most programming languages, but it looks like I may have to resort to some convoluted workaround to achieve the same effect. It is less than diverting to have to do this.

  7. You can't use the style element in your HTML post but you can make sure the CSS you added for images only changes those inside your "Navigator" div by changing the img declaration to:

    .Navigator img {
      YOUR_EXISTING_CODE_HERE
    }

    I'm not sure of the reason but your img element tags are not being closed properly, try using the following instead and see if anything changes:

    <img src="IMG_URL" alt="Needlepoint" title="Navigator: hat band" />

  8. thx it worked like a charm! now on to adding text to the image. given that i am learning css as I am going along, I am sure I will more questions then. but this fix was superfab. thx again!

Topic Closed

This topic has been closed to new replies.

About this Topic