Show/Hide without reloading - javascript

I have 2 embeds I am displaying. The embeds have a link to a pdf:
<div id="container" class="text-center">
<embed src="www.example.com/pdf1.pdf" width="550" height="800" type='application/pdf' id="mypdf1">
<embed src="www.example.com/pdf2.pdf" width="550" height="800" type='application/pdf' id="mypdf2">
</div>
I also have 2 buttons, one to show the embed and another to hide the embed. Like this:
<div class="button">
<button class="btn-info" onclick="hide('thePdf2')" type="button">HIDE</button>
</div>
<div class="button">
<button class="btn-info" onclick="show('thePdf2')" type="button">SHOW</button>
</div>
I use the following functions to show and hide the embeds:
<script>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script>
My I am only showing and hiding one of the embeds, my problem is this: Evertime I show the embed it reloads the pdf and goes to the top of the pdf page. I don't want to reload the pdf everytime I show it. How can I achieve this ?

Isn't reloading the PDF in my browser (Chrome), so I can't reproduce, but using .visibility instead of .display might work in your browser.
<script>
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
function hide(target) {
document.getElementById(target).style.visibility = 'hidden';
}
</script>

You could also use .show()/.hide() Jquery function. Working plunck here. FYI, also added demo of loading a selected PDF into single <emded>.
/* toggle show hide of pdf */
$(document).on('click', '.pdf-container button', function(event){
var $target = $(event.target);
var $pdfViewer = $target.closest('.pdf-container').find('embed');
if(!$pdfViewer){ return; }
if($pdfViewer.is(':visible')){
$pdfViewer.hide();
$target.text('show');
return;
}
$pdfViewer.show();
$target.text('hide');
});

Related

Alpine.js - stop video on modal close

I have a working code, that stops the video on modal close. However, I wonder is there a way to achieve the same results using Alpine.js only. Without having a separate JS as in my current case.
Here is my code:
<div x-show="videoModal">
<div #click.away="videoModal = false, handleClick(videoPlayer)">
<div id="videoPlayer">
<iframe src="https://www.youtube.com/embed/{{ $video_id }}"></iframe>
</div>
</div>
</div>
<script>
function handleClick(element) {
var iframe = element.querySelector( 'iframe');
if ( iframe ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
}
</script>

Provide link to iframe via js

I have an iframe with src but I want to provide the link to src via javascript on click of the button. How do I pass the value?
EDIT: The webpage refreshes everytime I click on the button. It displays the webpage and then refreshes it to display again. How to avoid this?
<button type="button" onclick = "Open()">Click Me!</button>
<iframe id="iframe"
src="" //Provide link here
style="
z-index: 10;
display: None;
">
</iframe>
<script>
function Open() {
let myIframe = document.getElementById("iframe");
myIframe.style.display = 'block';
iframe.src = "www.mylink.com"
}
</script>
you're not referencing myIframe when setting src in the example, you need to do myIframe.src = 'https://www.mylink.com'

Javascript button slideshow

I am new to the javascript programming so can someone help me.
This is my code
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Change your colorIt function to the following. You need to set the src and then set the display to block. You might also want to move the height and width to CSS.
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg';
pic.width = 400;
pic.height = 150;
pic.style.display = "block";
}
function fillIt(e) {
pic.innerHTML="src=/'https://picturejs.org/adv/banner.jpg\' width=\'400px\' height=\'150px\'>";
}
The Source for the image in JavaScript is invalid. You used HTML hyperlinks in JS.
.innerHTML modifies the content between the opening and closing tags (<div>THIS</div>), not the content of the tag itself (<div THIS></div>).
You can modify the tags attribute using setAttribute or by setting a property directly:
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picturejs.org/adv/banner.jpg'
pic.width='400px'
pic.height='150px'
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
You were on the right track. However, you need to set each property in JS.
ALso I could not get picturejs.org to load so I placed a picsum pic in there instead.
var button = document.getElementsByTagName('button')[0];
var pic = document.getElementsByTagName('img')[0];
button.addEventListener('click', colorIt, false);
function colorIt(e) {
pic.src='https://picsum.photos/150/400'
pic.width='400'
pic.height='150';
pic.style.display='block';
}
<div id="picture">
<img src="" id="picture" style="display:none;">
</div>
<button id="button">Click Me</button>
Please try the below code:
function fillIt(e) {
pic.style.display = "block";
pic.src ="https://libertycity.net/uploads/download/gta5_lamborghini/thumbs/4qhllsfhd8fk9bm4mf36761u37/15205818409903_63e23c-pgta535987529.jpg";
}
You need to add the root of your image in , for example depeding on where you have the image downloaded in your PC.
Hope this helps !

javascript: hide the div if external .php file has .. inline style never changes

story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load

Show different form based on what image is clicked

I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.
There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>
Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.
I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.

Categories

Resources