MODAL component in bootstrap acting really weird - php

I am having a quite peculiar problem with bootstrap's modal. It has been functioning normally until I decided that only some parts of my webpage should be called when the user is logged out. So I added these lines of php code :
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
<!--FIRST ADDITION : THE IF CLAUSE -->
<?php
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"]) {
include '2AversPA.php';
}
?>
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<!--SECOND ADDITION : THE IF CLAUSE -->
<?php
if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"]) {
include 'PAvers2A.php';
}
?>
</div>
<div class="tab-pane" role="tabpanel" id="tab-3">
<p>Content for tab 3.</p>
</div>
</div>
Now, what is extremely weird is that. If I add the first "if" in the TAB1 and directly include 'PAvers2A.php' in TAB2 (ie without the second if clause), the modal works normally. The same goes if I add the "if" in the TAB2 and directly include '2AversPA.php' in TAB1.
BUT, if I add the two if clauses together (which is what I want) the modal just doesn't show up. The button still works and calls the element #MyModal but the dialog box just won't appear.
Can anyone help me solve this mystery?

Related

how to give external link from homepage to another page using bootstrap

how to give link one page to another page vertical tab using bootstrap.
External link page:
<div class="tt-service-info"><a class="tt-service-title c-h5" href="http://jsrgraphics.com/our-products#finishing">FINISHING EQUIPMENT</a></div>
Destination page:
<li class="tt-nav-tab-item">FINISHING EQUIPMENT</li>
Tab content:
<div class="tab-content">
<div class="tab-pane text-style active" id="finishing">
<h3 class="uppercase yes_border">1 Color Machine </h3>
<p>
<?php echo do_shortcode('[featured_product_categories cats="220" per_cat="6" columns="4"]') ?>
</p>
</div>
Note: I want open particular tab, please help out here

Hide content and then display the content within a tab table

I have a site where I have an availability calendar and I need to show it within a tab table, I have it working to show on both the content and then the tab table! How can I remove it from the content but still show it within the table? I have tried hiding it within the 'Manage Display' section of the content type but it removes it from both
<ul class="nav nav-tabs">
<li class="active">Description</li>
<li>Availability</li>
<li>Pricing Information</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home"><?php if(isset($node->field_cottage_description['und'][0]['value']))
{
print $node->field_cottage_description['und'][0]['value'];
}
?> </div>
<div class="tab-pane" id="profile">
<?php
print $content['field_availability']['#children'] ;
?></div>
<div class="tab-pane" id="messages"><?php if(isset($node->field_price_guide['und'][0]['value']))
{
print $node->field_price_guide['und'][0]['value'];
}
?></div>
</div>
I hope someone can help with my issue! If it's blatantly obvious then don't be afraid to let me know.
The only way to hide it but also keep it able to run is you just close it within the task manager...
if that dont work them you may have to turn it off and back on..
if that dont work them i think you may have to script it to be able to do what you are needing

PHP SQL - appearing outside div tag

I've spent all afternoon trying to figure this out with no success, I wondered if anyone could help?
I have a dropdown menu on my site which is working perfectly. I've duplicated one of the menu options and after I did this it still worked fine, it had a php / SQL query inside but once duplicate it still did what it should.
What I did then was change the SQL and although the query is correct (checked in myphpadmin) all of my results appear out side of the div tag for some reason, its as if the div tag is closing itself.
Here's my code:
'
<li>Brand<!-- Begin 4 columns Item -->
<div class="dropdown_5columns"> <!-- Begin 4 columns container -->
<div id="top"></div>
<div class="col_4">
<h2 style="width:98%;">Choose from the following Brands:</h2>
</div>
<div class="col_1" style="width:190px;">
<?php
$databrand = mysql_query("SELECT DISTINCT(brand), COUNT(*) as Total from `pt_products` where `brand` <>'' group by `brand` limit 5")
or die(mysql_error());
while($infobrand = mysqlfetch_array( $databrand ))
{
print "<li style='width:190px;'>";
print "<a href='/brand'>".$infobrand['brand']." (".$infobrand['Total'].")</a></li>";
}
print "</div>";
?>
<div id="bottom"></div>
</div><!-- End 4 columns container -->
</li>`
I can't seem to figure this one out. All I did was change the SQL Query.
I've tried deleting the duplicate content and starting again, but get the same outcome.
Any help would really be appreciated.
here's the view source data on of my site:
<li>Brand<!-- Begin 4 columns Item -->
<div class="dropdown_5columns" style="position:absolute;"> <!-- Begin 4 columns container -->
<div id="top"></div>
<div class="col_4">
<h2 style="width:98%;">Choose from the following Brands:</h2>
</div>
<div class="col_1" style="width:190px;">
<li style='width:190px;'><a href='/brand'>Balterio (50)</a></li>
<li style='width:190px;'><a href='/brand'>Dale Hardware (24)</a></li>
<li style='width:190px;'><a href='/brand'>EuroSpec Hardware (2)</a></li>
<li style='width:190px;'><a href='/brand'>Everbuild (35)</a></li>
<li style='width:190px;'><a href='/brand'>Jeld Wen (4)</a></li>
</div>
<div id="bottom"></div>
</div><!-- End 4 columns container -->
</li>
You can't tell from below but the first <li style='width:190px;'> and the </div> after the li list are higlighted in red (error) and also the last </li>
Thanks in advance for your help.
You're using <li>, which should be inside a <ul> or <ol>, which you can then put inside a <div> if you need. Alternatively, you can change the <li> to something else, such as another <div>.
Your problem is like when you put a <p> directly inside a table without nesting in <tr><td>.

Hide the menu when clicking outside it

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.
Here is the code,
<li onclick="san()">
<div id="topnav"><a id="displayText" href="#" class="signin">My Acount</a></div>
<div id="topnav1" style="display:none;"><a id="displayText1" href="#">My Acount</a></div>
</li>
<div id="signin_menu" style="display:none;">
<div class="droptop"></div>
<div class="maindropsign">
<div class="header_box">My Acount</div>
<div class="txt_drop">My Profile</div>
<div class="txt_drop">My Backer History</div>
<div class="txt_drop">Edit Settings</div>
<div class="txt_drop_log">Log Out</div>
</div>
<div class="dropbut"></div>
</div>
<script language="javascript">
function san()
{
if(document.getElementById('signin_menu').style.display=='')
{
document.getElementById('signin_menu').style.display='none';
document.getElementById('topnav1').style.display='none';
document.getElementById('topnav').style.display='';
}
else
{
document.getElementById('signin_menu').style.display='';
document.getElementById('topnav1').style.display='';
document.getElementById('topnav').style.display='none';
}
}
</script>
Please help me to do this.
You have to remember the state of the menu first, like set var open = true when its open. Then make a function that 'toggles' and bind that to the onClick event of your menu-head. Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).

problem in toggle function of jquery

i have a section in my website that needs to be toggled by clicking on the title .
now i wrote this code to toggle when clicking on title
$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
html part :
<h4 class="trigger">'.$row[title].'</h4>
<div class="toggle_container">
<div class="block">
'.$row[text].'
</div>
</div>
now with these codes everything goes fine , untill it just opens every title clicked and not closes opened ones ;
1st
now i have to change this script in a way that when i click on a title to toggle first check opened ones and close those first
2nd
and the other thing im wondering is how to make the first title to be opened already ,
when the page loaded the first title to be opened
thanks in advance
I was hoping one of the other answers would update and fix this, but both of them never toggle, they always show, here's how to toggle and hide the others like you want:
$(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow")
.siblings(".toggle_container").slideUp();
});
});
You can try out a demo here, it shows the first on load, and correctly toggles the rest.
This should do it I guess
$(document).ready(function(){
$(".toggle_container").hide();
$(".toggle_container:first").show();
$("h4.trigger").click(function(){
$(".toggle_container").hide();
$(this).toggleClass("active").next().slideToggle("slow");
});
});
Html
<h4 class="trigger">Title1</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
<h4 class="trigger">Title2</h4>
<div class="toggle_container">
<div class="block">
Test
</div>
</div>
Javascript
$(document).ready(function(){
$(".toggle_container:gt(0)").hide();
$("h4.trigger").click(function(){
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
});
});
You can check working demo at http://www.jsfiddle.net/XnV69/3/

Categories