Flexscroll not working in show/hide div - javascript

<div class="right_tab_content_part1_s">
View Provider
View Message
</div>
<div style="display:block;" id="divtabnewBeforeaward1"></div>
<div style="display:none;" id="divtabnewBeforeaward2"><div id="scroll2_msg" class="flexcroll"></div></div>
<script type="text/javascript">
function showHideDivforTabbingBeforeaward(id)
{
for(j=1;j<3;j++)
{
if(id==j)
{
document.getElementById('divtabnewBeforeaward'+j).style.display = 'block';
document.getElementById('classtabnew'+j).className = 'active';
}
else
{
document.getElementById('divtabnewBeforeaward'+j).style.display = 'none';
document.getElementById('classtabnew'+j).className = '';
}
}
}
</script>
Flexscroll is not working, even when i use the enter fleXenv.initByClass ("a-class-name-of-your-choice"); or fleXenv.fleXcrollMain (yourDivElement);

Use this before closing the body tag:
<div id='flexcroll-init'></div>

Related

My side-nav collape will not work inside <form>

I've been trying to fix this for a while now, when my side-bar is inside a tag it stops working.
HTML:
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
CSS:
#media screen and (max-width:992px){.aptest-sidenav.aptest-collapse{display:none}.aptest-main{margin-left:0!important;margin-right:0!important}}
#media screen and (min-width:993px){.aptest-sidenav.aptest-collapse{display:block!important}}
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.style.display === 'block') {
mySidenav.style.display = 'none';
overlayBg.style.display = "none";
} else {
alert("2");
mySidenav.style.display = 'block';
overlayBg.style.display = "block";
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>
I'm not sure what is wrong, ive tried using jQuery, pure JS I cant get it to work. The JS above doesn't even run. I'm really confused. Thanks for any help!
You do not have any element with id="aptest_open". Your alert code is in a code block that works only by click on element with id aptest_open.
When you select an element by jquery selector, To change it's styles you need to yous css not style. In code snippet I added a button with id aptest_open and edited the problem.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<nav class="aptest-sidenav aptest-collapse aptest-white aptest-animate-left" style="z-index:3;width:300px;" id="mySidenav">This is my side nav
<br />
<div class="aptest-container aptest-row">
<div class="aptest-col s4">
<img src="/aptestimages/avatar2.png" class="aptest-circle aptest-margin-right" style="width:46px" />
</div>
<div class="aptest-col s8">
<span>Welcome, <strong><asp:Label runat="server" ID="Name_txt" Text="" /></strong></span><br />
</nav>
<div class="aptest-overlay aptest-hide-large aptest-animate-opacity" onclick="aptest_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="aptest-main" style="margin-left:300px;margin-top:43px;">
</div>
<input type="button" id="aptest_open" value="aptest_open" />
<script type="text/javascript">
$(document).ready(function () {
var mySidenav = $("#mySidenav");
var overlayBg = $("#myOverlay");
$("#aptest_open").click(function () {
if (mySidenav.css('display') === 'block') {
mySidenav.css('display', 'none');
} else {
alert("2");
mySidenav.css('display', 'block');
}
});
function aptest_close() {
alert();
mySidenav.style.display = "none";
overlayBg.style.display = "none";
}
});
</script>

Hidden Div takes space before Javascript switch with other

I have 2 Div's that when I press a button they swich between them using javascript .
The problem is that before I press the button the hidden div takes space and messes the layout .
I attached the snippet
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>
You've just to hide it for the first time using :
document.getElementById('2').style.display = 'none';
Or also using inline style (NOT recommended):
<div id="2" class="inner border" style='display:none'>
Hope this helps.
document.getElementById('2').style.display = 'none';
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>
<style>
div#2 {display: none;}
</style>

Changing div onclick value using js

I am trying to pass a string to the onclick value of a div and it's just not working, have tried a million ways of doing it and this is what I have at the moment. I have tried passing different strings, plain text etc.. but nothing seems to be placed in the onclick value.
script:
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'nextpage.php\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
and my div:
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
I've looked on this site and I can't find a solution anywhere..thanks!
edit (ive moved the script below the div.. still not doing anything :( ):
<div id='popup' class='popup' style='display:none'>
<h5>Are you sure you wish delete this ad?</h5>
<div style='height:96px; width:128px; border:1px solid black; top:70px; left:50px; position:absolute;'>
<img id='delimg' src="" style='max-height:96px; max-width:128px;'>
</div>
<br>
<div id='confirm' style='top:220px; left:100px;' class='yesnobutton' onclick=''>
YES
</div>
<div style='top:220px; right:100px;' class='yesnobutton' onClick='closePopup()'>
NO
</div>
</div>
<script type='text/javascript'>
function openPopup(imgname) {
document.getElementById('popup').style.display = 'block';
document.getElementById('delimg').src = 'imgstore/' + imgname;
document.getElementById('confirm').onclick = 'location.href=\'newurl.html\'\;';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
</script>
Try to set a function to the onclick attribute.
<body>
<div id="confirm" style="top:220px; left:100px;" class="yesnobutton" onclick="">
YES
</div>
<script>
document.getElementById('confirm').onclick = function() {
location.href = 'nextpage.php';
}
</script>
</body>

Multiple div popups

I have a JavaScript to open a DIV as popup.
But now I want to open several different popups from different DIVS and I can't get it to work properly.
I use the following JavaScript:
<script>
window.onload = function()
{
var show = document.getElementById('show-div');
var hide = document.getElementById('hide-div');
var popup = document.getElementById('popup-div');
show.onclick = function(e)
{
popup.style.visibility = 'visible';
return false;
}
hide.onclick = function(e)
{
popup.style.visibility = 'hidden';
return false;
}
}
</script>
and for the div I use the followin code:
<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
This works for 1 link but even when I use a different DIV ID's (and associated var element like "var popup1 = document.getElementById('popup-div1');" and popup1 onclick events) I can't get it work properly.
How can I make it work with several links with all it's own DIV with content.
(as I can't answer my own question, here is how I fixed it)
I made it work with the following code:
<script>
window.onload = function()
{
var show = document.getElementById('show-div');
var show2 = document.getElementById('show-div2');
var hide = document.getElementById('hide-div');
var hide2 = document.getElementById('hide-div2');
var popup = document.getElementById('popup-div');
var popup2 = document.getElementById('popup-div2');
show.onclick = function(e)
{
popup.style.visibility = 'visible';
return false;
}
show2.onclick = function(e)
{
popup2.style.visibility = 'visible';
return false;
}
hide.onclick = function(e)
{
popup.style.visibility = 'hidden';
return false;
}
hide2.onclick = function(e)
{
popup2.style.visibility = 'hidden';
return false;
}
}
</script>
and
<a id="show-div" href="#">link</a>
<div id="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
<a id="show-div2" href="#">link2</a>
<div id="popup-div2">
<div id="popup-header">
<div id="popup-title">...Popup title2...</div>
<a id="hide-div2" href="#">X</a></div>
<div id="popup-body">
<p>This is the content of the div2....</p>
</div>
</div>
I believe following is that you want....
Demo
JS Code:
var show = document.getElementById('show-div');
var hides = document.getElementsByClassName('hide-div');
var popups = document.getElementsByClassName("popup-div");
show.onclick = function (e) {
for (var i = 0; i < popups.length; i++) {
popups[i].style.visibility = 'visible';
}
return false;
}
for (var j = 0; j < hides.length; j++) {
hides[j].onclick = function (e) {
this.parentNode.parentNode.style.visibility = 'hidden';
return false;
}
}
HTML Code:
<a id="show-div" href="#">Show/Hide</a>
<div id="popup-div" class="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>
</div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>
<div id="popup-div" class="popup-div">
<div id="popup-header">
<div id="popup-title">...Popup title...</div>
<a id="hide-div" class="hide-div" href="#">X</a>
</div>
<div id="popup-body">
<p>This is the content of the div....</p>
</div>
</div>

Perform validation on CheckBox check/uncheck in javascript

Here i have one check box if that check box is checked then i want to display one div and if that checkbox is unchecked then i want to hide that div.
Below is my code its not working please help .
<div class="row1" id="homemove"> <span class="label">Home Move</span>
<input type="checkbox" id="homecheck" onclick="HomeMove()" </input>
</div>
function HomeMove() {
if (document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "block";
} else if (!document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "none";
}
}
Replace your Javascript HomeMove function as below
function HomeMove() {
if (document.getElementById("homecheck").checked) {
document.getElementById("NewAddress").style.display = "block";
} else {
document.getElementById("NewAddress").style.display = "none";
}
}
Not sure what document.SalesNew.HomeMove is supposed to be, but you should just create an event handler like so:
<div class="row1" id="homemove">
<span class="label">Home Move</span>
<input type="checkbox" id="homecheck"></input>
</div>
<script type="text/javascript">
document.getElementById('homecheck').onchange = function() {
document.getElementById("NewAddress").style.display = this.checked ? 'block' : 'none';
}
</script>
Also, you don't have an element with the ID NewAddress, but I'm guessing there is one in the actual code you're using.
Or, if you want to keep your own code, you could do it this way:
http://jsbin.com/uludes/1/edit
Try out the following fiddle: http://jsfiddle.net/GtmWX/2/
Simple checkbox to show/hide div
HTML
<p>Check here to show div <input type="checkbox" name="checkbox" id="checkbox" tabindex="165" /></p>
<div id="hiddenDiv"></div>
JS
function setUp() {
document.getElementById("checkbox").onclick = function() {
if (document.getElementById("checkbox").checked) {
// show div
document.getElementById("hiddenDiv").style.display = "block";
} else {
// hide div
document.getElementById("hiddenDiv").style.display = "none";
}
};
// hide on initial page load
document.getElementById("hiddenDiv").style.display = "none";
}
window.onload = function() {
setUp();
};

Categories

Resources