I'm trying to insert code into a php page (Wordpress) here is the working model http://jsfiddle.net/Bf49z/13/
I get this error
'Parse error: syntax error, unexpected 'pic' (T_STRING), expecting ',' or ';' in /home/raymondp/public_html/wp-content/themes/Child of Chameleon RP/includes/featured.php on line 7'
In the php page I have
<?php
echo"<script language='javascript'>
<div id="picOne">one</div>
<div id="picTwo">two</div>
<div id="picThree">three</div>
<div id="picFour">four</div>
</script>
";
?>
<?php echo "<script type=\"text/javascript\" src=\"www.raymondplumbing.com.au/wp-content/themes/Child of Chameleon RP/plumbers.js\"></script>; ?>
The css is as per the js fiddle, and is in the stylesheet and verified working.
The JS is in the file plumbers.js and looks like this
(function animate(index) {
$elements.eq(index)
.animate({ opacity: '1', left: '6px' }, 1000)
.delay(3000)
.animate({ opacity: '0' }, 1000, function() {
$(this).css({ left: '400px' });
animate((index + 1) % $elements.length);
});
})(0);
I am a complete beginner at PHP and JS/JQuery although I have been altering/editing php pages for several years. I know HTML/CSS
The code works in the fiddle and I also have it working in an HTML page - but I want it to work in Wordpress where it will run in a box with a background and different words.
I'm very lucky to have got this far, with help from here.
I must be close because I'm getting errors!!
line 7 is the first
<div class="pic">
Hope someone here can tell me what I've done wrong?
Rob
In PHP you cannot add double quotes inside double quote or you have to escape them.
change you code from this
<?php
echo"<script language='javascript'>
<div id="picOne">one</div>
<div id="picTwo">two</div>
<div id="picThree">three</div>
<div id="picFour">four</div>
</script>
";
?>
To
This
<?php
echo"<script language='javascript'>
<div id='picOne'>one</div>
<div id='picTwo'>two</div>
<div id='picThree'>three</div>
<div id='picFour'>four</div>
</script>
";
?>
If you have use Double quotes (") then inside these try to use single quotes or escape them properly.
In this line of your code you have already escaped quotes with backslashes
<?php echo "<script type=\"text/javascript\" src=\"www.raymondplumbing.com.au/wp-content/themes/Child of Chameleon RP/plumbers.js\"></script>; ?>
<?php
echo"<script language='javascript'>
<div id=\"picOne\">one</div>
<div id=\"picTwo\">two</div>
<div id=\"picThree\">three</div>
<div id=\"picFour\">four</div>
</script>
";
?>
Related
I'm currently working on a page which loops some content. When you click on the image, more information appears in a javascript popup. I want to give every popup an unique link (with a $_GET). Any ideas how I can do this with PHP or Javascript (or both).
Pop-up script:
<!----- JAVASCRIPT FOR EACH ELEMENT ---->
<script type="application/javascript">
function openPopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "block";
}
function closePopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "none";
}
</script>
The pop-ups are created inside a foreach loop (PHP) with the onClicks in it.
Thanks in advance!
you can do like this:
<?php if (isset($_GET['my_get_var']) && !empty($_GET['my_get_var']) : ?>
<div class="my-popup">
<!-- my popup code -->
</div>
<?php endif; ?>
no need for js at all - just CSS, HTML and PHP
I would like to hide the div with the class= "form-group" if the label inside doesn't have anything to display
here is my html code:
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2['req_1'].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
And my javascript is here:
<script type="text/javascript">
if($('label.tbh:empty')){
$('div.form-group').hide();
}
</script>
Is there any other way to do that? In my code it doesn't seem to work.
Thanks in advance for the help.
Using .text() is a safer option. If the label is empty, .text() will return an empty string and negating it will give true. Refer to the interactive snippet with example below. I placed the relevant code in a button click handler to prove that it works after you click on it.
$('button').click(function () {
if (!$('.tbh').text()){
$('.form-group').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="exampleInputFile" class="tbh"></label>
<input type="file" name="my_image" accept="image/*" id="exampleInputFile"></div>
<button>Click to hide</button>
If you are using jQuery, you may do it by that way:
$("div.form-group label.tbh:empty").parent().hide();
It's a right way to do in inside document.ready callback:
$(document).ready(function(){
$("div.form-group label.tbh:empty").parent().hide()
});
To include jQuery, add
echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>';
to head of your script.
But it seems like you are using PHP or something like at your backend side?
If so, you may do it on server-side code like this:
if(strlen($query2['req_1']) == 0)
{
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2["req_1"].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
}
in this case you would not transfer unneeded data to the client.
Try this:
if($('label.tbh').html() == ""){
$('div.form-group').hide();
}
You can do it like this:
/* Be sure that your dom is loaded */
$( document ).ready(function() {
/* Checking that the label is empty */
if($("label").html().length == 0) {
$('div.form-group').hide();
}
});
You can also use size() instead of length.
I have the following problem. No matter which image I click, function 2 gets executed. Thanks a lot for your help.
<l href='<?php echo function1(); ?>' onclick='alert("ON!")'> <IMG STYLE="position:relative; margin-top: 40px" SRC="/img/on.png" page="control.php"></l>
<l href='<?php echo function2(); ?>' onclick='alert("OFF!")'> <IMG STYLE="position:relative; margin-top: 40px; margin-left: 80px" SRC="/img/off.png" page="control.php"></l>
The purpose of it is to execute different sql queries but they both execute the same query. The functions are included in a separate php. My only guess at the moment is that it is related to the styling.
The l> tag:
$( document ).on(
"click",
"l",
function( event ){
// Stop the default behavior of the browser, which
// is to change the URL of the page.
event.preventDefault();
// Manually change the location of the page to stay in
// "Standalone" mode and change the URL at the same time.
location.href = $( event.target ).attr( "page" );
}
);
As you haven't provided your php code yet here are my assumptions about your case:
function1() does some mysql query like that: UPDATE t SET state='on'...
function2() does almost the same: UPDATE t SET state='off'...
By using this code:
<?php echo function1(); ?>
<?php echo function2(); ?>'
You are basically calling both functions. First one switches something on then second one turns it off again and makes you think that only second query was executed. There is a problem with the logic of your code.
You can achieve your goal by using GET variables and running first or second function depending on its value. Here's example script
PHP:
<?php
if (isset($_GET['action'])) {
if ($_GET['action'] == "on") {
function1();
elseif ($_GET['action'] == "off") {
function2();
}
}
?>
HTML:
<span onclick="alert('ON!')"> <IMG STYLE="position:relative; margin-top: 40px" SRC="/img/on.png" page="control.php?action=on"></span>
<span onclick="alert('OFF!')"> <IMG STYLE="position:relative; margin-top: 40px; margin-left: 80px" SRC="/img/off.png" page="control.php?action=off"></span>
I am trying to get the code of a specific summer note div with multiple ones on a single page.
My summer notes are created from a database with php as follows:
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>
And then my javascript is:
<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>
It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.
What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.
(btw) I am initilizing the summer notes like this:
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
After selecting all summernote's you need to access their attributes by specifying one element like:
<script>
$('.summernote').each(function(i, obj) { $(obj).summernote({
onblur: function(e) {
var id = $(obj).data('id');
var sHTML = $(obj).code();
alert(sHTML);
}
});
});
</script>
To display multiple editors on a page, you need to place more than two <div> elements in HTML.
Example:
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
Then run summernote with jQuery selector.
$(document).ready(function() {
$('.summernote').summernote();
});
For more information click
Note: Multiple Editor summernote not work with id
I Finally got the code working for multiple summernote editors and image uploading!
To fix
"undefined"
, try:
var id = $(obj).data('id');
to
var id= $(obj).attr('id'))
Source:
https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js
Regards!
For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc
Summernote works for the first output only but you can make it work for others by using the class twice:
<div class"summernote summernote"> </div>
Provided your script is like this:
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"
Dont forget to do the same on your initialisation script
<script>
$('.summernote').summernote({
height: 200 //just specifies the height of the summernote textarea
});
</script>
Example
<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>
<script>
$('.summernote').summernote({
height: 200
});
</script>
I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>
in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"