I am using ckeditor to insert some html structure into db. I firstly use code view to paste html structure into editor, after inserting into mysql db, until echo at webpage, the html structure data are still maintained.
However, when the same data is called into the same ckeditor again for updating, the structure is destroyed, and I found the ckeditor has automatically changed html tags to the codes, below is an extract:-
A) html code to be pasted to editor code view for inserting (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
B) db data (good)
<a href="#">
<img src="../catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
C) webpage data called from db (good)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<a href="#">
<img src="/catalog/view/theme/default/images/services/b1.jpg" alt="" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"></div>
</div>
<div class="cat-title-bg">
SERVICES
</div>
</a>
D) code view in ckeditor, with contents filled from the above data (changed)
called by html_entity_decode($record["content"],ENT_COMPAT, 'UTF-8');
<img alt="" src="../catalog/view/theme/default/images/services/b1.jpg" />
<div class="btn-gradient-yellow">Details
<div class="btn-arrow"> </div>
</div>
<div class="cat-title-bg">SERVICES</div>
How can I ask ckeditor not to add changes to the data?
CKEditor modifies your HTML because it is incorrect. You cannot put block elements inside of <a> unless you use HTML5 which isn't supported by CKEditor yet.
See my answer for related question. Also take a look at this one regarding blocks in <a>.
Related
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
CLARIFICATION: Being that I've never used PHP, it was unclear how to format the PHP file, so that when you include it in the index, then header(nav bar) would show up. No posts explained why I had to change my index.html to index.php to make it work. And again, being that I haven't used PHP, I was under the impression that changing the extension meant that I would have to convert my HTML code to PHP commands. I was trying to avoid having to change my whole code around. That's where the confusion was.
I was going to delete the question once I got it figured out. Then again, I'm sure I'm not the only person that may run into this while making their first website.
SOLUTION. Save only the nav code in html language with a PHP extension (header.php). Change index/home file from .html to a .php extension (don't have to modify any code. but accepts the include prompt). Then, include the header.php in your index.php. Same goes for your footer. Thanks for the help everyone.
*ORIGINAL POST: Through another post, I was told it would be easier to use a nav/footer on multiple pages by using PHP.
I created a file and tried including it and it is not displaying. I'm not sure what I am doing wrong.
There is some CSS in my nav bar as well, do I need to import the css file in the PHP file? or does the index.html file automatically attach to the included (php) file.
PHP Code:
<?php
echo '<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>';
?>
HTML Code (include):
<body>
<?php include '/header.php';?>
....other code....
</body>
If there's a problem with the PHP file, if I'm missing something, can someone show an explain please?
no need to add <?php ?> code in the header file just keep it as it is :
Create a new file named header.php and add this code to it
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
Include header.php anywhere you want
Remove the <?php tag from your code. As you generated html output. <?php tags are used to generate output by php.
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
If you want to use php tags, than you have to write the code in this way:
<?php
echo '
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
';
?>
Your problem is most likely the pathing of you include. Often you'd need to specify from the server root, and not just /header.php.
To specify your including-path, you could specify the root like this
include $_SERVER['DOCUMENT_ROOT']."/header.php";
You can also set the default include path in your php.ini file, thus making the $_SERVER['DOCUMENT_ROOT'] an automatic process, that can be done with running this code, that will alter your php.ini file.
ini_set('include_path', '/usr/lib/pear');
As others have pointed out, you don't need the contents of your /header.php to be echoed out as it's pure HTML. Anything that's included will be included the way it is, so having the contents of /header.php as pure HTML just makes for better practice, as it's easier to read.
Good day.
I have this code:
<div class="align-center">
<a href="#" class="client">
<div><img src="./client0.png" alt="" /></div>
<p class="italic comm"> Test Test Test Test</p>
</a>
</div>
I paste this code in a textarea ckeditor, but after pressing the tab "source" and back to view page I get changed code:
<div class="align-center">
<div>
<a class="client" href="#"><img alt="" src="./client0.png" /></a>
</div>
<p class="italic comm"><a class="client" href="#"> Test Test Test Test</a></p>
</div>
Please tell me how to stop changing the code?
The reason for such behavior is that your markup is invalid.
HTML 4.01 specification (also xHTML 2.0) doesn't allow block elements like <div> inside <a> (see this answer). CKEditor follows those specs so, of course, it also finds your code invalid. Still, CKEditor's parser tries to fix your HTML and the result is what you call "changed code".
Your code could be valid in HTML5 though. CKEditor doesn't support HTML5 DTD yet because it's complex and dynamic as opposed to HTML 4.01 (xHTML 2.0).
At the moment, the only solution is to change your code.
This question is pretty specific, but I'll ask anyways.
First off, I know iframe's are probably not the best design but I don't know how else to solve my problem. Anyways, let me start of with some background information:
I have a page with some WebGL content on it (it just loads a .obj and .mtl model using Three.js, and adds some keyboard navigation for camera movement).
This page is structured so that it gets a variable using php's $_GET array, and then loads the model based on that variable (if the variable was "Bus" then it would load from obj/Bus/Bus.obj, and if the variable was "Shoe" then it would load from obj/Shoe/Shoe.obj).
The link to the page would be like "browser.php?name=Bus" or "browser.php?name=Shoe".
Now, I want to display several of these pages in a carousel of iframes. Because I am using Bootstrap, this task is trivial with the following code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<iframe src="browser.php?name=Bus" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
<div class="item">
<iframe src="browser.php?name=Shoe" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
This works perfectly except for one issue, the carousel-caption and all of its content are not showing. I am not sure if this is because of the iframe, or of the WebGL content, because when I just had an image there, its content was showing.
WebGL Iframe Carousel:
Normal Image Carousel:
Finally, my question: How do I fix my code / organization / design so that I can display the WebGL content in a carousel?
Sorry if this is a duplicate, but I was unable to find any relating links on google.
Thanks for taking your time to read/possibly answer this question,
Bucco
[EDIT]:
I just realized that my question was horribly worded, and was not clear enough. My main issue is with the navigator arrows not showing up in the WebGL content carousel (see the images). How do I fix my design / code so that I can display the WebGL content in a carousel with the navigator arrows?
The only obvious thing I see is that the <iframe>s are missing their closing tags, which are actually required according to the W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags).
I assume the normal behavior of an <iframe> is kicking in, which means that any children of the <iframe> are only displayed if the src cannot be loaded. Or, stated another way: lacking the closing tag, it looks like your navigation elements are treated as "fallback" content rather than sibling elements.
In fact, loading your content into a jsFiddle seems to prove me out: http://jsfiddle.net/dRtvH/ - w/o closing tags, no carousel, but simply closing the <iframe>s makes the nav buttons show up.
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?