I'm working on the playground using from codemirror.net, and is works great. My next step is to have auto load set a value to file path name, each textarea will load file path from .html, .css and jquery.
currently in codemirror showing
<div id="wrap">
<!-- Code Editors --> <section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<textarea name="html"></textarea>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea name="css"></textarea>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea name="js"></textarea>
</div> </section>
<!-- Sandboxing --> <section id="output">
<iframe></iframe> </section> </div>
The result of preview textarea showed "Hello world" that because in javascript showed
html_editor.setValue('<p>Hello World</p>');
css_editor.setValue('body { color: red; }');
so i change set value in codemirror like this.
<textarea name="html"><?php
echo file_get_contents('testcode.php');
?>
</textarea>
</div>
this works great when I see HTML code inside of text area but unable to see the preview in the text area.
so I'm trying to solve this how to see preview too using
<?php echo file_get_contents('testcode.php');?>
I thought to make change in javascript where it said
html_editor.setValue('<p>Hello World</p>');
css_editor.setValue('body { color: red; }');
my question is that how can I write code in PHP inside of javascript file.
i tried
html_editor.setValue('<?php echo file_get_contents('testcode.php');?>');
css_editor.setValue('body { color: red; }');
it does not work.
Any other idea how to solve this to make both works!
many thanks.
AM
Try this :
var = "<?php echo file_get_contents('testcode.php')?>";
html_editor.setValue(var );
css_editor.setValue('body { color: red; }');
Related
I have a simple website, using php, html, css,
and would like to hide two menu buttons:
menu box & text
<div class="filter margin"></div>
<div class="filter_options">
<div class="filter_op filter_op_selected" data-type="type" data-id="bla 1">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
<div class="filter_op " data-type="type" data-id="bla 2">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
Still it is necessary, that the upper box is ticked & as such recognized by the code;
for the correct work-logic of the menu.
Thanks for any tip or suggestion.
[I know that in the code language mql4/5, which is based on php, you can simply hide a line of code when typing # in front of it.
It won't be shown, but it will be used (if such a box is hidden but ticked, it will behave like that).
I was asking myself how to do that in php]
After researching a lot, I've come to the following answer:
<div class="filter margin"></div>
<div class="filter_options">
<div
class="filter_op filter_op_selected"
data-type="type"
data-id="bla 1"
style="height: 0; visibility: hidden; font-size: 0; padding: 0; margin: 0"
>
<div class="ranking_filter_check"></div>
<div class="ranking_filter_value">bla</div>
</div>
</div>
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I am using this simple code in my view.php. The div is aligned horizontally correctly, but it aligns vertically in print.
<div class="row">
<div class="col-lg-6">
<div class="col-lg-7" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b>Patient Name:</b> <?= $model->patient_name ?>
</div>
<div class="col-lg-5" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b> Auth. No.:</b> <?= $model->authorisation_number ?>
</div></div> </div>
I want these div to align horizontally in print as well. I am not using any custom print.css for this page.
Ok I found the answer-
I need to use <div class=col-xs-*> in place of <div class = col-lg-*> that mostly achieves what I am looking for.
I welcome if there is any better workaround.
Thanks.
i created a header.php for my web site.
For my menu, i created 5 buttons.
When i press on a button it redirect me on the page associated to it.
Until now everything fine.
What i want is, on the current page, my button of the page associated to it change to an other color or background image.
I dont know if we can do that and if i explain myself well.
here my header.php
<div id="main_menu">
<div id="menu_blog"><button onclick="location.href='blog.html'"><h1>Trucs/Astuces</h1></button></div>
<div id="menu_contact"><button onclick="location.href='/contact.php'"><h1>Contact</h1></button></div>
<div id="menu_soumission"><button onclick="location.href='/soumission.php'"><h1>Soumission</h1></button></div>
<div id="menu_realisation"><button onclick="location.href='/realisations.php'">
<h1>RĂ©alisations</h1></button></div>
<div id="menu_service"><button onclick="location.href='/services.php'">
<h1>Services</h1></button></div>
<div id="menu_a_propos"><button onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
Simple way is use CSS
#yourbutton:hover{
background-color: red;
}
or
#yourbutton:active{
background-color: red;
}
Pass a GET value with each link
<div id="menu_contact"><button onclick="location.href='/contact.php?active=1'"><h1>Contact</h1></button></div>
check the value of active in the button
< button <?php if ($_GET['active']==1) echo 'class="active"'; ?> ..../>
then make a css style for active class
.active{
/*your style here*/
}
Your PHP page:
<div id="main_menu">
<div id="menu_blog">
<button onclick="location.href='/blog.html'" <?php if($_SERVER['REQUEST_URI'] == '/blog.html'){echo 'class="currentPage"'; }?>>
<h1>Trucs/Astuces</h1>
</button>
</div>
… and so on for each menu item ...
</div>
Your CSS:
button.currentPage{
background-color: red;
}
Short version:
add $current_location to every page and name it after it
<?php
$current_location = "a_propos" ;
?>
Check if location is correct, then change background color
<div id="main_menu">
<div id="menu_a_propos"><button <?php if ($current_location == "a_propos");?> style=" background-color: red;"<?php };?> onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>
I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.
I have the following code :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<div class="span1">
<input type="hidden" name="tracking_id" value="" />
</div>
</div>
</div>
This code work well and the result is what I expected.
If I do this :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
The layout is not respected. See this picture for the demostration :
Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?
jsfiddle : http://jsfiddle.net/t9M3C/
Near line 285
Is because you have a css rule (in bootstrap.min.css file) that match the firs-child element (but only if has a class*="span") inside the default_shipping_box div.
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
So, if you put your hidden input inside the div#default_shipping_box and before the first span, then that rule is not styling the div.span1 and thats why your template is been afected.
You can fixed adding a simple css rule to the same file...
.row-fluid .span1{margin-left:0 !important;}
The important, is because you have more files who overite this rule (ex. in bootstrap-responsive.min.css)
Good luck, and i hope it helps
cheers,
Gmo.-
EDIT:
Too slow XD.
Answered while writing ... I agree with the reason explained above.
Using Google Chrome's Inspest Plugin, when you move the input this class:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
Gets removed.
This is because in this:
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
This : <div class="span1"> is not the first child, this: <input type="hidden" name="tracking_id" value="" /> is.
and in your CSS this is that default class for [class*="span"] is:
[class*="span"] {
float: left;
margin-left: 30px;
}
So use this for example :
.row-fluid .span1 {
margin-left:0 !important;
}
Hope this helps.
Bootstrap has some CSS that will set the left-margin of the first of the child to 0, if the class contains span:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
When the hidden input is put above the first span div, the above margin-left: 0; property will not be applied.
The following image shows that when the hidden input is before, then the first span class has a left-margin.
This shows that when the hidden input is after the div, that there is no left-margin.
EDIT: I seem to have a been beaten twice, while I was getting the screenshots to illustrate the difference!