Develop Reference

Trying To Create a J-Query Pop Up Redirect To Another Pop-Up [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Example Of One I am trying to create a popup which when the user clicks on the button inside the pop-up it takes them to a brand new pop-up. I can't seem to find the correct HTML script for it. So I was wondering if anyone had any ideas!

With the Foundation and nested modals, this is possible.
$(document).foundation();
<script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js" type="text/javascript"></script>
Example Modal…
<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
<h2>This is a modal.</h2>
<p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
<p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
<p>Second Modal...</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal" data-reveal>
<h2>This is a second modal.</h2>
<p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
<a class="close-reveal-modal">×</a>
</div>
Pen: http://codepen.io/anon/pen/rOdPqK

ALSO.. you can do it with Customized modal div where no need for any other plugin also full style-customization the way you want and can include any type of content.. as in the following code: JSFIDDLE
$('.modal a').on('click', function (evt) {
evt.preventDefault();
});
$('.open-modal').on('click', function (evt) {
evt.preventDefault();
$('#overlay').show();
});
$('.modal-close').on('click', function () {
$('#overlay').hide();
$('#modal1').show();
$('#modal2').hide();
});
$('#modal2').hide();
$('#pg1btn1').on('click', function () {
$('#modal2').show();
$('#modal1').hide();
});
$('#pg2btn1').on('click', function () {
$('#modal1').show();
$('#modal2').hide();
});
$('#pg2btn2').on('click', function () {
$('#overlay').hide();
$('#modal1').show();
$('#modal2').hide();
});
#overlay {
display:block;
width:100%;
height:100%;
z-index:100;
position:fixed;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.5);
font-family:verdana, sans-serif;
}
.modal {
display:block;
width:400px;
height:250px;
position:fixed;
top:calc(50% - 100px);
left:calc(50% - 200px);
background-color:#EEE;
border:2px #AAA solid;
border-radius:5px;
box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);
font-size:24px;
padding:5px;
}
.modal-head {
display:block;
height:30px;
padding:5px;
font-weight:bold;
text-align:right;
}
.modal-head a {
text-decoration:none;
display:inline-block;
width:15px;
height:15px;
margin-right:5px
}
.modal-action {
display:block;
background-color:#DDD;
width:60px;
position:absolute;
left:calc(50% - 30px);
margin-top:10px;
bottom:10px;
padding:5px 10px;
border:2px #CCC solid;
border-radius:5px;
text-align:center;
cursor:pointer;
text-decoration:none;
}
.modal-action:hover {
background-color:#BBB;
border-color:#999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Crema crema chicory viennese sugar medium, rich mazagran americano aftertaste cinnamon rich. Filter, frappuccino that decaffeinated siphon caffeine so sit dripper. French press shop carajillo cappuccino mocha medium white lungo.</div>
<div>Activate Modal
</div>
<div id="overlay">
<div id="modal1" class="modal">
<div class="modal-head">x
</div>
<div class="modal-body"><strong>Page ONE: </strong>Ristretto spoon galão bar, lungo siphon whipped variety seasonal half and half. Dripper plunger pot saucer crema extraction filter arabica. Next
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-head">x
</div>
<div class="modal-body"><strong>Page TWO: </strong>Roast, steamed, robust, chicory qui kopi-luwak, cappuccino, roast half and half cappuccino aromatic variety. Rich a mazagran qui cup barista chicory. PrevClose
</div>
</div>
</div>

Css/Jquery Slide Up Panel [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I trying to make a slide up panel the reveals a hidden menu with css/jquery If you look at this link http://www.responsivefilemanager.com/filemanager/dialog.php you will notice that when you hover over the file, a hidden menu is revealed. Can someone give me an example as to how I can accomplish this?

Try This.
http://jsfiddle.net/aqm7kjbg/2/
HTML
<div class="main">
<div class ="samp1">
Content
</div>
<div class="description">
Description
</div>
<div class="icon">
Icon
</div>
</div>
CSS
.main{
width:100%;
height:140px;
}
.samp1{
background-color:grey;
padding:10px 10px 20px 10px;
}
.description{
position:absolute;
background-color:red;
width:97.1%;
}
.icon{
background-color:blue;
}
JQUERY
$('.main').hover(function(){
$('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
$('.description').animate({'margin-top': '0px'}, 500);
})

Demo
HTML
<br/><br/><br/>
<div class="container-two-div">
<div class="contain-things back">
Back
</div>
<div class="contain-things front">
File
</div>
</div>
CSS
.container-two-div , .contain-things
{
height:50px;
max-height:50px;
min-height:50px;
overflow:visible;
background-color:gray;
width:100px;
}
.front
{
position:relative;
top:-50px;
transition: all 1s; /* transition when the mouse over */
background-color:red;
color:white;
}
.container-two-div:hover .front
{
top:-100px;
}

Learning jQuery's tabs + CSS Flexbox. Can anyone help get this working?

I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/

I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle

Input select dropdown not working in firefox

I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome.
I have created a jQuery submenu box. My problem is when I put content in the content area of the submenu, its ok. But when I am creating a select box in that content area its not working in Firefox but works fine chrome browser...I mean I can't select any option of that select box when I am trying to select option 2, option 3 etc, the whole thing got disappear.
I need your help regarding this.
Here is my html code:
<div class="layout_nemo" style="margin:0px auto; width:520px;">
<aside id="models">
<section class="nestingList" style="width:520px;">
<div style="float:right; width:100px; border:1px solid #f00; text-align:right">A5
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé
</li>
<li>A5 Sportback
</li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
</div>
And the CSS code:
.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}
.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {
clear:both;
}
aside {
display:block;
}
nav ul, ul.nav {
padding-bottom:0;
}
.flyout {
display:none;
height:auto;
overflow:hidden;
position:absolute;
z-index:9999;
}
.flyout nav#navigation .links a {
font-family:Verdana, Helvetica, sans-serif;
line-height:20px;
font-weight:bold;
background-position:0 -444px;
}
.flyout nav#navigation .links a:hover {
background-position:0 -444px;
}
.flyout>.inner {
position:relative;
margin:-3px 3px 3px 3px;
}
#models {
position:absolute;
top:-124px;
}
#models.home {
top:-84px;
}
#models section {
display:inline;
float:left;
}
#models .flyout {
left:-3px;
width:520px;
}
#models .articles, #models .inner {
overflow:hidden;
}
#models .inner {
position:relative;
padding-top:20px;
min-height:280px;
}
#models .nav li {
list-style-image:none;
list-style-type:none;
margin-left:0;
}
#models .nav a {
display:block;
height:29px;
line-height:29px;
padding-left:9px;
border-top:1px solid #e7e9ea;
text-decoration:none;
background:none;
}
body.special #main .content .mediaContainer, body.special #main .content .audi_flash_replace, body.special #main .content .flash_3col, body.special #main .content .con_flashfilm_3col, body.special #main .content body.special.detail .headline h1 {
font-size:36px;
}
.layout_nemo #models {
top:23px;
}
.layout_nemo #models section>h1>a {
margin-left:0;
}
Also sharing you a link
where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)

Developing primarily in Chrome will always lead to strange behavior in other browsers, so a good start would be to do it in Firefox. If it works in Firefox 99% it will work everywhere else, in IE too. Chrome has a lot of assumptions and "helpful" features that derail developers.
Also, my test in Firefox showed no errors. I am using 23.0.1.

I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.
http://jsfiddle.net/cgRA2/19/
<div class="layout_nemo">
<aside id="models">
<section class="nestingList">
<div id="new_url_top">
A5 series
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé</li>
<li><a href="#" class="track-click" >A5 Sportback</a></li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.
Problem is inside your js.js file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.
So the part of jQuery that is making the problem is located around:
line 4836
line 4841
line 4937
line 4942
line 5074
If you can get that spaghetti code out and do something with it... Good luck.
Someone posted a solution here Containing div loses focus when mousing over select dropdown

July 14, 2021
Anyone experiencing recent issues with Firefox not rendering HTML, in particular the <select> element correctly see below:
I have been managing a Grails web application for a number of years and came across this issue just the other day, where my site worked fine in all browsers, but for whatever strange reason, Firefox simply would not render the <select> tags in their allocated <div>
Following a lot of testing across the browsers and using Firebug console/inspection, I tracked it down to an old HTML 4.0 Doctype definition.
As soon as I updated my site to the HTML 5 standard doctype, Firefox fell into line and rendered everything perfectly.
FIX:
Change OLD Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
To NEW Doctype:
<!DOCTYPE html>
I know this is YEARS later than the original question post, but I would have really appreciated stumbling across this answer.
I hope it helps someone out there.

Confusing CSS, can anyone explain please [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am not sure why the last image 6.png is selected, when all the images are direct descendants of the div shape. Thanks for your help its much appreciated.
From what I understand it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><img src="images/2.png"></div>
<div class="two"><img src="images/3.png"></div>
<div class="three"><img src="images/4.png"></div>
<div class="four"><img src="images/1.png"></div>
<div class="five"><img src="images/5.png"></div>
<div class="six"><img src="images/6.png"></div>
</div>
</div>
</body>
</html>

All of them are selected.
They are overlapping eachother, as in they all have the same position.

Replace
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
for
#shape > div{
position:relative;
float: left;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
And you should see the difference.