PrettyPhoto inline Content div hide show - javascript

I have a problem with PrettyPhoto
in inline content there is two div and one button.I want that when I clickedn button divisionImage will hide and divisionVideo will show. here is a codes inline content and div hide show function not working
<div id="inline-content" class="hide" style="text-align: center;">
<input id="btn1" type="button" name="btnCzmVideo" value="Çözüm Videosu"
onclick="VideoGoster()" />
<div id="divisionImage" style="text-align: center;">
<img id="imgCozumIcerigi" src="#" />
</div>
<div id="divisionVideo" style="display: none;">
</div>
</div>
function VideoGoster() {
$("#divisionImage").css('visibility', 'hidden');
$('#divVideo').show();
}

Problem Solved
actually divs hided and showed but u cant see
in prettyphoto modal when press right arrrow PrettyPhoto Content refreshed and your divs is hided and showed what you wanted.
send right arrow key or left arrow key to page programatically and problem was solved

Related

Is there a way to prevent slideToggle on every element?

I'm working with slideToggle function with jQuery. When I click on the div everything is working just fine I mean the toggle. But I have a problem that when I click on the div one div every element moves. Is there a way how to move only the div that I clicked ???
$(document).ready(function(){
$("#toggle").click(function(){
$("#test").slideToggle("slow");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<img src="assets/kids-2580991_1920.jpg" class="d-block w-100" alt="https://www.vavaland.sk/">
<div class="bottom-left" id="toggle">Pohybová príprava JUNIOR a TEEN</div>
<div id="test" style="display: none;padding:50px;">testjandkansdlkjnaskjdnkajsdnjkasndkjansdkjanjkasd</div>
</div>
EDIT : See the gif for more understanding
https://giphy.com/gifs/dBOZRXfUNm2pkmuRGa

Adding div inside another div without separate scope

I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}

Disable Bootstrap from a custom button

How can I disable the Bootstrap from resizing my button inside of a div element. It is an order button and it gets almost invisible if used in mobile device.
It is actually an a tag with an img inside of it.
Here's the following script:
<div class="buttonImage" style="color:green" style="font-size: 2">
<a href="transaction.html?totalprice=3000">
<img src="img/orderbutton.png" width="15%" height="15%" onmouseover="this.src='img/orderbuttonhover.png'" onmouseout="this.src='img/orderbutton.png'" alt="OrderButton"/>
</a>
<label class="cash">3000 Points</label>
</div>
Is there any suggestion to not resize this button? My div element will not be resized, but the buttons will instead. And also, the most left button resizes first before the middle and right button (there are 3 divs horizontally, 6 divs vertically).
Remove width="15%" height="15%" and add the class of img-responsive and apply mobile classes to the parent div for mobile screen's.
<div class='col-lg-2 col-xs-12'>
<div class="buttonImage" style="color:green" style="font-size: 2">
<a href="transaction.html?totalprice=3000">
<img class='img-responsive' src="img/orderbutton.png" alt="OrderButton"/>
</a>
<label class="cash">3000 Points</label>
</div>
</div>
This format will ensure that when your viewing the block from anything that is smaller than desktop at two columns it will get the max width so it's not tiny.

jQuery working for multiple buttons and divs

I am having some trouble on making a button only to show one div, not all of them.
Here's my JS code:
$('.show_avatar').click(function(){
$('.avatar').toggle('slow',function() {
});
});
Here's my HTML:
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<%= image_tag d.avatar.url(:medium) %>
</div>
My HTML is in a loop, so it generates multiple buttons with multiple images. When I click in any of the buttons (.show_avatar), all the divs appear (.avatar). I know why this happens, but I don't know how to fix it.
I thank you in advance.
Demo
Without needing any changes to the given HTML, you want to target the element that is the first match of .avatar after the button that you click. You can use next().
$('.show_avatar').click(function(){
$(this).next('.avatar').toggle('slow',function() {
});
});
You could wrap each in a wrapper
<div class="wrap">
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<img src="http://placehold.it/150x150">
</div>
</div>
and change it to only call it's sibling:
$('.show_avatar').click(function(){
$(this).siblings('.avatar').toggle('slow',function() {
})
});
http://jsfiddle.net/e629orfb/

Hidden div shows and disappears in a flash

I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>

Categories