<!--
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<style>
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: blue;
color: lightblue;
}
.button1:hover {
background-color: lightblue;
color: blue;
}
</style>
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
Hello noobies
</div>
-->
<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
background-color: #00111a;
color: white;
}
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: #1ab2ff;
color: white;
font-weight: bold;
transition: 0.3s;
}
.button1:hover {
background-color: #66ccff;
}
.button1:active {
background-color: #0088cc;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
}
ul.tab li {float: left;}
ul.tab li a {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.tab li a:hover {
background-color: #66ccff;
}
ul.tab li a:focus, .active {
background-color: #0088cc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
h3 {
opacity: 0.5;
}
p {
opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
<li>Overview</li>
<li>Files</li>
</ul>
<div id="Overview" class="tabcontent">
<h3>SuperBlaze27 Core</h3>
<p>
Still in development but really cool!<br>
If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
<h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
</div>
</p>
</div>
<div id="Files" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</script>
</body>
</html>
With that I want the blue bar to not go all the way to the right and just stop after files. This is just a test but I wanted to see how it can work. I got some of the code from W3Schools. I just couldn't figure out how to get rid of the rest of the bar that isn't being used. THX in advance! ;)
Add display inline-block to both the ul and li.
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
ul.tab li {
float: left;
display: inline-block;
just add the last line to your code:
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
Related
I am trying to use the following header menu template across my website. unfortunately, the menu hides the top part of my page content. I am a newbie. Please help. I tried, removing z-index, adding bottom margin, noting works.
The header.php code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive Hamburger Menu</title>
</head>
<body>
<!-- partial:index.partial.html -->
<header class="header">
<a href="" class="logo">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.jpg"
class="logoimage"/></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li class="contactme">Contact Me</li>
<li class="aboutme">About Me</li>
<li class="projects">Projects</li>
<li class="Home">Home</li>
</ul>
</header>
<!-- partial -->
<style>
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #fffceb;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background: rgb(255, 245, 246);
color: rgb(247, 133, 152);
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
.logoimage{
width: 130px;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.Home{
order: 1;
}
.projects{
order: 2;
}
.aboutme{
order: 3;
}
.contactme{
order: 4;
}
}
#media only screen and (max-width: 600px) {
.menu{
display: flex;
flex-direction: column-reverse;
}
}
</style>
</body>
</html>
Then I have a index.php where I include this header.
The style related to my index.php is
body {
background-color: #f2f2f2;
}
.formular input:disabled {
background-color: #dddddd;
}
.hint {
color: grey;
}
.title {
font-weight: bold;
}
p.subtitle {
font-weight: bold;
}
.requiredSymbol {
color: red;
}
.formular input[readonly="readonly"] {
background-color: #dddddd;
}
form.formular,
.validationEngineContainer {
/*background-color: #FFFFFF;*/
font-family: tahoma, verdana, "sans-serif";
font-size: 12px;
padding: 20px;
border: 1px solid #a5a8b8;
width: 700px;
margin: 0 auto;
}
.formular fieldset {
margin-top: 20px;
padding: 15px;
border: 1px solid #b5b8c8;
border-radius: 5px;
}
Your header css should have a position:relative. And you can add some margin to add distance from whatever is in the body.
Example shown below:
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgb(0 0 0 / 10%);
position: relative;
width: 100%;
z-index: 3;
margin-bottom: 10px;
}
I am using PHP sessions to to provide specific forms on a page and need to toggle between a "show form" link and the form. I have this working using jQuery toggle(), but I cannot figure out how to prevent the "show form" link from displaying in both toggle states.
I have experimented with jQuery hide() after toggle(), but this made everything disappear, and I have tried using CSS visibility: hidden (which also just caused everything, including the PHP content, to disappear).
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?>
</div>
<script>
function toggleForm() {
$("#showForm").toggle();
$("#togLink").toggle();
}
$("#togLink").click(function() {
toggleForm();
});
$("#showForm").click(function() {
toggleForm();
});
</script>
The above code works, but the PHP output is displayed in both toggle states (which, I know, is the expected behaviour). As I said above, I need some way of making the toggle state "either or" - clickable link or form, not both. Can anyone offer any suggestions for this?
...
...
CSS code:
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#showForm {
display: none;
}
...
...
Thanks to Grant Noe this is almost working. With the above code everything works perfectly ...except that clicking on the form causes it to disappear. Grant has since revised the code (again, thanks); but the revised code, whilst addressing the problem of the disappearing form, has a visible "contact form" link in both toggle states and loads the form first, not the link. The latter should be simple to fix; but I cannot figure out how to show either the contact form link or the form, not both in both toggle states.
The code, when using Grant's revised code, is as follows:
<div id="togLink">
<?php echo $JQclick; ?>
</div>
<div id="showForm">
<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
</script>
#font-face {
font-family: 'blair_capsregular';
src: url('../.typefaces/blair_caps-webfont.woff2') format('woff2'),
url('../typefaces/blair_caps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#ExBox {
width: 600px;
margin: 50px auto 0 auto;
text-align: justify;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 1.6;
}
.titleBar {
width:100%;
}
.Tbox {
float:left; height:25px;
text-align: center;
font-size: 15px;
font-family: 'blair_capsregular';
}
#box {
border: 2px solid blue;
margin: 0;
position: static;
padding: 0 2px 0 2px;
text-decoration: none;
}
#box a:link {
color: orange;
text-decoration: none;
}
#box a:visited {
color: orange;
text-decoration: none;
}
.Tbox:nth-child(1) {
width:33.3%;
}
.Tbox:nth-child(2) {
width:33.3%;
}
.Tbox:nth-child(3) {
width:33.3%;
}
.clearRed {
clear: both;
color: red;
}
.Tbox a:link {
color: black;
text-decoration: none;
}
.Tbox a:visited {
color: black;
text-decoration: none;
}
.Tbox a:hover {
color: red;
text-decoration: none;
}
.Tbox a:active {
color: hotpink;
text-decoration: none;
}
.Tbox a:focus {
color: hotpink;
text-decoration: none;
}
/* FORM CSS - Placeholder colors */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #9b9b9b;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9b9b9b;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #9b9b9b;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #9b9b9b;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #9b9b9b;
}
textarea::placeholder { color: #9b9b9b; font-family: arial; }
/* Colors for focused fields */
input[type=text], input[type=email], textarea {
outline: none;
border: 1px solid #9b9b9b;
}
input[type=text]:focus, input[type=email]:focus, textarea:focus {
border: 1px solid #00C5BE;
}
/* Input styling */
textarea {
font-family: arial;
width: 27rem;
font-size: 1rem;
padding: 0.6rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input {
display: block;
font-size: 1rem;
width: 27rem;
padding: 0.6rem;
margin: 0.5rem;
border-radius: 5px;
border: 1px solid #9b9b9b;
color: #9b9b9b !important;
}
.contact-form-div input[type=submit] {
width: auto;
background-color: #00C5BE;
border: none;
color: #fff !important;
font-size: 1em;
padding: 10px 50px;
text-transform: uppercase;
font-weight: normal;
}
/* Hide the fake field */
#m66 {
display: none;
}
/* VERTICAL SLIDER */
* { margin:0; padding:0; }
a { text-decoration: none; }
.expand {
background: #fff;
overflow: hidden;
color: #000;
line-height: 50px;
transition: all .5s ease-in-out;
height: 0;
}
.expand:target {
height: 50px;
}
.close {
max-height: 0;
}
/* JQUERY TESTING */
.box{
display:none;
}
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
I have not added-in contactForm to the HTML side of things, because it does not fix the persistent "contact form" link and leaves an ugly background-colour box behind even when hiding the form but failing to hide the link.
...
...
26 May 2019: with reference to a reply by rg88 [ How do I hide a part of a form and make it visible only on clicking a "Add another" button? ] this is what finally worked:
<a id="togLink" href="#"><?php echo $formClick; ?></a>
<div id="togForm"><?php require_once $_SERVER["DOCUMENT_ROOT"] . '/form.php'; ?>
</div>
<script>
$( "#togLink" ).on( "click", function() {
$('#togForm').toggle();
});
</script>
#togForm {
display: none;
}
There is still the issue of not being able to make the words "Contact Form" disappear when the form is loaded or being able to replace the words with something else, but it appears that it is not possible to make this happen because the Contact Form link (in this case) is the toggle point and therefore has to remain constant in all toggle states.
You're toggling just the one element right now, given this format: $(toggled-element).toggle();. You'll need to toggle both elements like this:
$('#togLink').click(function(){
$('#showForm').toggle();
$('#contactForm').toggle();
});
If you initially want the link showing and the form hidden, you could hide the form with css with display: none;, or at the top of your html in a script with $('#showForm').hide();. So the total result would be something like this:
$("#togLink").click(function() {
$("#showForm").toggle();
$("#contactForm").toggle();
});
#togLink {
color: blue;
cursor: pointer;
}
#togLink:hover {
text-decoration: underline;
}
#showForm,
#contactForm {
width: 425px;
height: 550px;
}
#showForm {
background-color: #DDD;
}
#contactForm {
background-color: #AAA;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="togLink">Toggle Form</div>
<div id="showForm"></div>
<div id="contactForm"></div>
Let me know if I missed something.
Changelog:
I added the #contactForm div that's not seen in OP to adjust to OP use-case requests. The clarification occurred in the comments on my answer.
Placing the PHP in an HTML element allows you to have separate control over that element:
<div id="togLink">foo
<?php echo $JQclick; ?>
</div>
<div id="showForm">bar
<span>glorp<?php require_once $_SERVER["DOCUMENT_ROOT"] . '/formInc.php'; ?></span>
</div>
Use CSS to hide the element:
span {
display: none;
}
Then avoid the element to be toggled, using .not():
$('#togLink').click(function(){
console.log('click');
$('#showForm').not('span').toggle();
});
Here is a DEMO
I am using Ultimate Popup Plugin from CodeCanyon on this website Click here to create a login modal.
The code is working fine, but the popup stays even if someone clicks outside the popup, and the user must enter the details and click enter.
This is how it looks;
I tried providing a z-index to keep the popup on but I am stuck.
I had updated the code I have for the wordpress plugin whatever I could find.
This is the CSS and the JS of the popup:
jQuery(window).load(function(){
if (jQuery.cookie("popupTemporaryCookie13428")) {
// Popup is hiding after showing first time!
jQuery("#ultimate-popup-13428").hide();
} else if (jQuery.cookie("popupLongerCookie13428")) {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
} else {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
}
var expiresAt = new Date();
expiresAt.setTime(expiresAt.getTime() + 1*24*60*60*1000); // Days
jQuery.cookie("popupLongerCookie13428", new Date());
jQuery.cookie("popupTemporaryCookie13428", true, { expires: expiresAt });
});
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.ultimate-popup-wrapper {
background: #fff none repeat scroll 0 0;
border-top: 8px solid;
padding: 35px;
position: fixed;
text-align: center;
z-index: 9999;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: .4s;
transition: .4s;
visibility: hidden;
max-width: 100%;
}
.ultimate-popup-wrapper-activate {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.cross-btn-ppm {
font-size: 20px;
font-weight: 700;
position: absolute;
right: 10px;
text-transform: uppercase;
top: 5px;
cursor: pointer;
z-index: 99;
font-family: arial, sans-serif;
}
.ultimate-popup-inner h2,
.entry-content .ultimate-popup-inner h2,
.entry-summary .ultimate-popup-inner h2,
.page-content .ultimate-popup-inner h2,
.comment-content .ultimate-popup-inner h2 {
font-size: 25px;
margin: 0 0 15px;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.ultimate-popup-inner {
font-size: 16px;
}
.ultimate-popup-shortcodes p {
margin-bottom: 15px;
}
.ultimate-popup-shortcodes input[type="text"],
.ultimate-popup-shortcodes input[type="email"] {
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px !important;
width: 100% !important;
}
.ultimate-popup-shortcodes {
margin: 30px auto 0;
max-width: 500px;
text-align: left;
}
.ultimate-popup-shortcodes br { display: none }
.ultimate-popup-shortcodes input[type="submit"] {
border: medium none;
border-radius: 7px;
color: #fff;
font-size: 17px;
padding: 15px;
width: 100%;
text-transform: uppercase;
-webkit-transition: .4s;
transition: .4s;
}
.ultimate-popup-shortcodes .gform_wrapper .gform_heading { display: none }
.ultimate-popup-shortcodes .gform_wrapper .gform_footer {
margin: 15px 0 0;
padding: 0;
}
.ultimate-popup-wrapper-hide .lean-overlay,
.ultimate-popup-wrapper-hide .ultimate-popup-wrapper {
display: none !important;
visibility: hidden !important;
}
.ultimate-popup-halfway-scroll-activate .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm { top: -8px }
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .cross-btn-ppm {
background: #333;
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
top: 20px;
z-index: 9;
}
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .popup-inner-col-thumb { padding-top: 5px }
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-12 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-10 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-6 .cross-btn-ppm {
right: 10px;
top: 5px;
}
.ultimate-popup-theme-id-1 .cross-btn-ppm { right: 10px }
/* Mobile Layout: 320px. */
#media only screen and (max-width: 767px) {
.ultimate-popup-wrapper { overflow: auto }
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-thumb {
float: none;
margin-bottom: 30px;
margin-top: 0;
padding: 0;
width: auto;
}
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-cont {
float: none;
padding: 25px;
width: auto;
}
.ultimate-popup-automatic-activate .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
}
<div class="remodal" data-remodal-id="modal"
data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
<form method="post">
<div class="form-group">
<label for="email">Login</label>
<input type="text" class="form-control" required name="email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" required id="pwd" name="pwd">
</div>
<button type="submit" class="btn btn-default">Enter</button>
</form>
</div>
#charset "UTF-8";
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
h1 {
color: #00ff00;
}
p {
background-color: transparent;
color: #ffffff;
}
div
{
color: #00cc00;
}
div #controls
{
color: red;
}
div a
{
color: #00cc00;
}
div a:active {
color: #00cc00;
}
div a:hover {
color: #F58100;
}
<!--/MAIN PANEL/-->
#parent {
width:400px;
}
#controls, #monitor {
float:left;
margin-top:0px;
padding-below:200px;
height:400px;
width:50%;
border:1px;
display:inline-block;
solid rgba(0,0,0,1);
text-align:center;
}
<!--/CONTENT AND CONTROLS/-->
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
h1text {
color: #fb667a;
font-size: 16px;
font-weight: bold;
float:left;
width:159px;
white-space:pre-wrap;
background: transparent;
}
.year {
float:left;
background: transparent;
}
img {
margin-bottom: 5px;
background:#fff;
cursor:pointer;
transform: scale(1);
-moz-box-shadow: 0px 1px 5px 0px #00cc00;
-webkit-box-shadow: 0px 1px 5px 0px #00cc00;
box-shadow: 0px 1px 5px 0px #00cc00;
}
img:hover {
opacity: 0.5;
cursor:pointer;
transform: scale(1);
visibility:visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index:100;
transition-timing-function:cubic-bezier(0.5, 0, 0.1, 1);
transition-duration:400ms;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height: 400px;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
margin
bottom:0;
right:0;
text-align:center;
width:100%;
background: #00cc00;
opacity: .8;
z-index:2;
}
#detail div span2 {
color:#ffffff;
position:absolute;
top:200px;
right:10px;
text-align:center;
width:50%;
height:200px;
background: #F58100;
opacity: .8;
z-index:10;
}
#links img {
width:10%;
height:30%;
margin-left:16px;
margin-top:100px;
}
<!--/SLIDER/-->
.track {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
border: 0;
width: 2000px;
}
.book {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
border: 0;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
.book:hover {
opacity: 0.5;
}
.book:nth-child(1) {
background-color: #ff0000;
}
.book:nth-child(2) {
background-color: #ffaa00;
}
.book:nth-child(3) {
background-color: #ffff00;
}
.book:nth-child(4) {
background-color: #00ff00;
}
.book:nth-child(5) {
background-color: #0000ff;
}
.book:nth-child(6) {
background-color: #aa00ff;
}
.book:nth-child(7) {
background-color: #ff00ff;
}
.left, .right {
position: absolute;
color: white;
font-size: 48px;
top: 57px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'pixbeans';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixBeans - Original Black TV Series</title>
<meta name="author" content="Antonio James">
<link rel="shortcut icon" href="assets/Icons/pixBeans icon.png">
<link href="tabpan.css" rel="stylesheet" type="text/css">
</head>
<style>*{margin: 0px; padding: 0px; background-color:black;}</style>
<body>
<div id="main-wrapper">
<div id="moviesbox" style="display:inline-block;">
<?php while ($movie = $result->fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
</div>
<?php endwhile; ?>
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="javascript/tabpan.js"></script>
<script src="javascript/imgjump.js"></script>
<script src="javascript/imgslider.js"></script>
</body>
</html>
I am trying to make all my images display on one horizontal line/row that can be scrolled left or right. However, no matter what I do I cannot seem to make the images quit wrapping to the next line. They are responsive so if i make the screen small 2 images will appear and the rest wraps to a new line. If i make full screen several images appear and the other 15 wrap accordingly. However, I want them to stay on one line. I dont care if the overflow is hidden or if the overflow scrolls in from off the page, I just want them to quit wrapping.
Here is what the site looks like right now:
screen shot. I made the parent div"moviesbox" dark grey so that you can see how far the div extends and I am using light grey to show the div area.
Here is the code that I am using to generate the images into the divs:
<div id="moviesbox" style="display:inline-block;">
fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
Here is the CSS I am using. I PREFER TO USE CSS but if not, i'm open to other fixes.
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
THanks.
I am trying to create a forum software and I would like when my breadcrumb links, change depending on what I clicked:
And:
Here is how my files are coordinated:
header.php, index.php, members.php, css/style.css
I would like that the element automatically changes according to the clicked page.
header.php code:
<div id="top_bar">
<div class="wrapper">
<div id="top_bar_links">
<ul>
<?php
$full_name = $_SERVER["PHP_SELF"];
$name_array = explode("/",$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li>
<a class="<?php echo ($page_name=="index.php")?"active":"";?>" href="index.php">Forums</a>
</li>
<li>
<a class="<?php echo ($page_name=="members.php")?"active":"";?>" href="members.php">Members</a>
</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="wrapper">
<h1 id="logo">
NextGenFocus
</h1>
<div id="user_links">
<ul>
<li id="sign_up">
Sign Up
</li>
<li id="sign_in">
Sign In
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb_top">
<div class="breadcrumb_links">
<ul>
<li class="forums">
Forums
</li>
</ul>
</div>
</div>
</div>
</div>
index.php and members.php code:
<?php
include "header.php";
?>
style.css code:
/* CORE */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
}
h1 {
font-size: 25px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 17px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
body {
background-color: #e6e9ed;
color: #000;
font-family: "Trebuchet MS", sans-serif;
font-size: 13px;
margin: 0;
padding-bottom: 15px;
}
.wrapper {
width: 980px;
margin: 0 auto;
}
a {
color: #4d7799;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
}
/* TOP BAR */
#top_bar {
background-color: #262d35;
height: 55px;
}
#top_bar_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#top_bar_links a {
color: #fff;
opacity: 0.6;
float: left;
display: block;
line-height: 55px;
padding: 0 25px;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
#top_bar_links a.active {
background-color: #000;
opacity: inherit;
}
#top_bar_links a:hover {
background-color: #000;
opacity: inherit;
text-decoration: none;
}
/* HEADER */
#header {
background-color: #3d5e78;
height: 115px;
margin-bottom: -25px;
}
#logo {
float: left;
}
#logo a {
color: #fff;
font-size: 25px;
line-height: 90px;
}
#logo a:hover {
text-decoration: none;
}
#user_links li {
float: right;
}
#user_links ul {
list-style: none;
margin: 0;
padding: 0;
}
#user_links a {
color: #fff;
line-height: 90px;
margin-left: 15px;
}
/* CONTAINER */
#container {
background-color: #fff;
box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
padding: 15px;
}
#breadcrumb_top {
background-color: #f5f5f5;
height: 45px;
margin: -15px -15px 15px -15px;
}
#breadcrumb_bottom {
background-color: #f5f5f5;
height: 45px;
margin: 0 -15px -15px -15px;
}
.breadcrumb_links ul {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb_links li {
float: left;
}
.breadcrumb_links a {
color: #000;
line-height: 45px;
margin-left: 15px;
}
.separator {
margin-left: 10px;
}
It seems you need to put something dynamic where you presently have 'Forums'. You have your pagename (members.php) in the variable $page_name, so try this:
<?php echo ucfirst(str_replace('.php', '', $page_name)) ?>
That will remove the ".php" from the string (so it turns into "members") and then upper-case the first letter (so it turns into "Members"). Don't be afraid to try out some other string operations if you need to adjust it further!