(window).load(function() { ... }); making the whole page go white - javascript

I have this function that resizes a div on the basis of whether or not its scrollHeight is greater than 175. It worked fine like this:
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
The problem was that some generated items which contributed to the div height were not being taken into consideration, not having yet been loaded when the script is run, so I put it inside of a (window).load(function() { ...}); like so:
$(window).load(function() {
var this_div = $('#content_' + <?php echo $counter ?>);
var this_div_height = this_div[0].scrollHeight; // 0 refers to the 0th child, i. e. the div itself
if (this_div_height > 175) {
document.write('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
}
});
...and now what happens is that the content blinks on the page for like a nanosecond and then the whole window is just white.

Your problem is caused by your use of document.write(). After the page has fully loaded and the whole document has been parsed, subsequent calls to document.write() obliterate whatever was there.
You're using jQuery, so you can just use .append() to add the new content.

Instead of document.write() which replaces everything on the page, append to the body:
var newsutff = $('<a id="slide_arrow_<?php echo $counter ?>" class="clear_both slide_arrow" href=\'javascript:toggle("<?php echo $counter; ?>", "<?php echo get_template_directory_uri(); ?>")\'></a>');
$('body').append(newstuff);

Related

Script works on every post but not the last post

My script removes the http:// and www from urls displayed in a post's content but for some reason it either affects all the posts but the last one or just the first post of the page depending on where I place the script.
For instance if it's in the loop it will affect all the posts but the last but if it's outside the loop it only affects the first post.
I'm looking for a solution so that it takes affect on all urls being displayed on a page. Any help would be much appreciated.
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<Script>
$(document).ready(function removeFunction() {
let post_id = '<?php global $post; echo $post->ID; ?>';
var str = document.getElementById("link" + post_id).innerHTML;
var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
document.getElementById("link" + post_id).innerHTML = res;
});
</Script>
<p><?php the_content(); ?></p>
<!-- This is where the URL's are EX: <a id="link[return_post_id]" href="http://example.com/">http://example.com/</a> -->
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
?>
1.You tagged jQuery there so put jQuery code outside of loop.
2.It has to iterate over all <p> and do what you are doing.
3.Change <p><?php the_content(); ?></p> to <p data-id="<?php global $post; echo $post->ID; ?>"><?php the_content(); ?></p> (inside while loop)
4.After above steps followed, change jQuery code like below:
<Script>
$(document).ready(function() {
$('p').each(function(){
let post_id = $(this).data('id');
var str = $(this).html();
var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
$(this).html(res);
});
});
</Script>
there is a problem and this is on mixture of php and javascript.
Your php code Generate JS Within a Loop, in each loop it will create a function named removeFunction() and your browser interpreter mixed up things. it will replace the last one.
There Are 2 Solution for Your problem:
First is to make These Functions Distinct like This:
$(document).ready(function removeFunction<?php echo $post->ID; ?>() {
this will make function names as removeFunction1() removeFunction2() ...
The Second Sulotion is to Define The function outside The loop and in the php loop just call the function like this:
while (have_posts()) : the_post(); ?>
<script>
removeFunction(<?php global $post; echo $post->ID; ?>);
and your function definition would be like this:
removeFunction(post_id){

using php string with line breaks as javascript variable

I was working on project in which I have to get some text from the database and display it in the text area. Working fine with no line breaks and tabs. but when a line breaks occurs it gives the error
Uncaught SyntaxError: Invalid or unexpected token
My java script code is as :
<script type="application/javascript">
$(document).ready(function () {
document.getElementById('job_type').value = "<?php echo set_value('job_type') ?>";
document.getElementById('job_cat').value = "<?php echo set_value('job_cat') ?>";
if("<?php if(validation_errors() == false) echo "false"; else echo "true"; ?>"=="false")
{
$('#job_title').val("<?php echo $job[0]->job_title ?>");
$('#job_type').val("<?php echo $job[0]->job_type ?>");
$('#job_cat').val("<?php echo $job[0]->job_cat ?>");
$('#salary').val("<?php echo $job[0]->salery ?>");
$('#job_descp').text("<?php echo $job[0]->job_desc ?>");//error here
}
});
});
</script>
The text it was trying to set was
Error details are shown in images
Debug info
I have tried using .html() and .val() too but nothing worked. How can I handle it.
This has already been answered here https://stackoverflow.com/a/4270709/3004335
However, you can use json_encode
<script type="application/javascript">
$(document).ready(function () {
document.getElementById('job_type').value = "<?php echo set_value('job_type') ?>";
document.getElementById('job_cat').value = "<?php echo set_value('job_cat') ?>";
if("<?php if(validation_errors() == false) echo "false"; else echo "true"; ?>"=="false")
{
$('#job_title').val(<?php echo json_encode($job[0]->job_title); ?>);
$('#job_type').val(<?php echo json_encode($job[0]->job_type); ?>);
$('#job_cat').val(<?php echo json_encode($job[0]->job_cat); ?>);
$('#salary').val(<?php echo json_encode($job[0]->salery); ?>);
$('#job_descp').text(<?php echo json_encode($job[0]->job_desc); ?>);//error here
}
});
});
</script>
You do however need to be careful about cross site scripting
See here https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet in particular rule #0
Remove line break(CR LF) in job[0]->job_desc
like this:
$('#job_descp').text("<?php echo str_replace (array("\r\n", "\n", "\r"), '<br>', $job[0]->job_desc);?>");

js can not call function name right

I want to make one javascript function, but I cannot call my function name right when i click on it(show_more_in_month_0/1/2).
this is my code
$i = 0;
foreach ($data as $row){
echo '<td><span class="glyphicon-plus show_more_in_mont_'.$i.'"></span><span class="glyphicon-minus_'.$i.'"></span></td>';
echo '<td>';
echo $row[0];
echo '</td><td>;
echo $row[1];
echo '</td><td>';
echo $row[2];
echo '</td><tr>';
$i ++;
}
And this is my script, i just want alert my class name after i call right function name
$(document).ready(function() {
$(".show_more_in_mont_'.$i.'.").click(function(){
alert(show_more_in_mont_'.$i.');
});
});
You are doing it wrong -- $i i suppose its your PHP variable ? well you shouldnt have those in your JS..
Just add as javascript one global class such "show-more-container" and use it to show whatever you want to show
$( document ).ready(function() {
$(".show-more-container").click( function() {
var elementId = $(this).data('id');
alert ('show_more_in_mont_'+elementId);
});
});
Now your html should look like
<div data-id="<?= $i ?>" class="show-more-container">
</div>
Hope this make sense to you :)
EDIT:
If you want to go far -- and call that as a function then do as follow:
window['my_fn_name_as_string'+appendId]()
for this to work the function should be on a Global scope -- on Body or Head and not inside Jquery! if you want to add it to jQuery then make sure you use:
$.function() {
window.my_fn_name_as_string_div = function() { }
}
EXAMPLE:
http://jsfiddle.net/7d23y99b/1/

call ajax function automatically

I have a dynamically generated post, where i use ajax to find, the no of comments and likes in it. so, i gave a onmouseovr selector and called the js function. but i want it to automatically be called once every 2 seconds. how should i do it?
echo "</div>";
//the div has to be updated every 2-3 seconds.
//but i dont know how. so, i gave a mouseoverfunction.
echo '<div onmouseover="yopahshareloader(';
echo "'" .$id. "',";
echo "'" .$postype. "'";
echo ');" id="'.$id.'_action" style="height:20px;width:100%;margin-bottom:5px;overflow:hidden;">' ;
echo '</div>';
Use setInterval
<script type="text/javascript">
window.setInterval(function() {
yopahshareloader('<?php echo $id; ?>', '<?php echo $postype; ?>');
}, 2000);
</script>

Multiple variables in PHP function

I looked around but couldnt find what i looked for so i thought i should try and ask.
Also i should mention i am quite new to most codes.
I am trying to get multiple variables from my database into my function.
From here i need the image link and the id. (As you can see i tried to link them in the onclick=)
<div id="HeadItems" >
<?php
$sqlhead = "SELECT * FROM items
WHERE part = 'head'";
$headquery = mysqli_query($con, $sqlhead) or die (mysqli_error($con));
while($headf = mysqli_fetch_assoc($headquery))
{
?>
<img class="headArmor" src="<?php echo $headf['image']; ?>" onclick="headHide('<?php echo $headf['image']; ?>", "<?php echo $headf['id']; ?>')"/>
<?php
}
?>
</div>
They go into my function:
function headHide(src, chosenid) {
var head = document.getElementById("head");
var HeadItems = document.getElementById('HeadItems');
HeadItems.style.display = 'none';
head.innerHTML = "<img src='" +src+ "' width=80; height=80;>";
var chosenhead = chosenid;
}
(when i click on the image the image is then inserted into the head.innerHTML)
Problem is that after i put in the second variable in the function (chosenid and the $headf['id'] in the while loop) it stopped working.
I probably made it hard to understand now (I'm dutch) so a small summary:
I want my onclick function to give me the $headf['head'] and $headf['id'].
so i can make the $headf['id'] into a var
You seem to have some single quotes missing here:
onclick="headHide('<?php echo $headf['image']; ?>', '<?php echo $headf['id']; ?>')"
^ ^
The problem is with the quotes in the definition of onclick.
This should work.
onclick="headHide(<?php echo '\''.$headf['image'].'\',\''.$headf['id'].'\''; ?>)"
//This will be onclick="headHide('image','id')"

Categories