I am using some github jquery code https://github.com/viralpatel/jquery.shorten to automatically shorten a paragraph and add a read more button, so i made the div element and it works fine when i use normal text, but i tried to add some sql (inside php) to show a value of something in a sql table, but when i load the page it just says "more" and when i click it, it loads the value from the sql, but it is supposed to just shrink the value and then when you click more it is supposed to show the rest instead it shows nothing and then when you click "more" it shows all of it, I am really stuck on this, have been trying to find an answer already for a few days.
example code
<div class="example">
<?php echo $sql_query; ?>
</div>
<script>
$(document).ready(function() {
$(".example").shorten({showChars: 100});
});
</script>
I figured out why it was causing such problems, I had comments inside the div element before the php echo, so it was counting the comments as chars, so when i removed the comments it all worked.
Related
I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!
I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)
while click button print the selected html page. Selected html have 5 pages but i want to print first two pages only. is it possible to send first two pages only while clicking the button . window.print() is have any function to send print first 2 page only instead of 5 pages?
The Simple answer is No. Just because there is no parameter in window.print() method, or such a configuration to do so. See the MDN Docs. But there is a simple workaround for achieving the thing you want. What you can do is just set style="max-height: 400px; overflow: hidden" to the body of HTML just before calling window.print() method. Here in sample 400px size is just for demo. You have to find that using trial and error. You also have to remove the style otherwise you won't be able to go through entire page.
You can use ngx-print, which is an angular component that can be used to print parts of a page. - https://www.npmjs.com/package/ngx-print
With ngx-print, you can use something like this :
<div id="sectionToPrint"> your content.. </div>
And then, for the print button, you can use ngx-print attribute like this :
<button printSectionId="sectionToPrint" ngxPrint> Print </button>
This will only print contents inside the "sectionToPrint" id.
Hope this helps.
I'm using a shortcode as part of my membership setup which allows users to upload files directly to their contact record in my CRM. This displays a multi-upload form which I have then styled:
Once the files are uploaded the page refreshes and a success message appears. On refresh I also need to display a hidden div (#hiddendiv) underneath the success message.
From what I've read there is a JS/PHP combination that could potentially achieve this (such as this example - although this is quite vague and difficult to adapt).
Can anyone assist me/point me in the right direction to achieve this?
Since your form page is refreshing then you obviously not using AJAX, therefore instead of putting the div as html what you can do is echo a assign a variable initially it should be empty then, then echo that variable where you wanna show the div, this will echo empty message at the begging... then upon successfully validating your form and on success then assign the content of that div to the empty variable once the page loads its gonna show the div content u just assign
<?php
$hiddenDiv = "";
if(isset($_POST['submitButton'])){
//validate what you need to validate on
//On success assign value to hidden div
$hiddenDiv="<div class=\"whatever\">What ever dv content you need to display</div>";
}
?>
<!-- the place you wanna show the div -->
<?= $hiddenDiv?>
You could use the jquery switch class. This will allow you to do CSS transitions to make the appearance of the element smoother. This could be part of 'a' ajax response.
You could also just do something as simple as
$('#hiddendiv').css({"display":"inline"})
EDIT ** changed the to 'a' in reference to ajax.
Try like below:
<?php
if(isset($_POST['whatever'])
{
$display='';
}
else
{
$display='none';
}
?>
<div style='display:<?=$display?>'></div>
I've built a simple chat that reloads every 3 seconds.
The actual reloading of the chat is done by this script (copied from Google, I've only done PHP, CSS and html before):
$(document).ready(function() {
$("#chat").load("system/chat.oclog"); // Loads chat upon page load
var refreshId = setInterval(function() {
$("#chat").load("system/chat.oclog");
}, 3000);
$.ajaxSetup({ cache: false });
});
Now to the problem. If you were to select any text inside of the chat-div, the selection goes away when the chat reloads since the div is being refreshed. This makes copying text a real pain.
Any suggestions/solutions to this problem is greatly appreciated. Me myself have been thinking of maybe making the script only reload the chat if the filesize of the chatlog has changed, but I'm not sure how to to this and Google hasn't given me a solution either.
/Erik
Solution :-
First Create 2 Div's , 1 For loading content and it will hidden by css ( display : none ), and then a another one that will be visible to user,
<div id="hidden_content" style="display : none;"> </div>
<div id="chat"> </div>
And your content will be load in hidden_content, and then add a another function that will called everytime when content loaded in in hidden element, then you can check if the string length of hidden_content's div is equal to chat div's content, and if it is equal so no need to copy this data in chat div , and if not then you can will use substr to find out what new more chars are added in hidden_content, and then once you find out those more chars that was not in chat before, "append" them the chat content !
So by this only new chars will append to that chat, so you can select and it will not reload again :), This solution will work if the loaded content increase like this :-
previous content + new content
Mean on server if There was one message on file and then a another added so this another one must be apped to that old one,
Well it's not a good solution at all, your browser will always dowload full data, and that is not good solution ! , Sorry for weak english :)
in order to edit the script of facebook plugin comment box to be dynamic and displays comments related to each post separately, I've added these 2 lines of code into the script :
var related = document.getElementById('fb-related');
related.setAttribute("data-href", "articles.aspx?art_id=<%# Request.QueryString["art_id"] %>"); ... (the rest of code) </script>
and this is the div where the comment box appear
<div id="fb-related" class="fb-comments" data-numposts="5" data-colorscheme="light"></div>
but nothing happens and the comment box doesn't appear at all ,or appears saying The comments plugin requires an href parameter. !! any help please ?
note that I'm using asp.net with C#
Put the data-href attribute in CodeBehind on the PageLoad event with C# code so when the page renders the plugin will already have a data-href