How do I increase the background size? [closed] - javascript

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
How do i make the black box reach the full height?
trulyamped.com/dropit
When you click on dropdown I want the entire background to be black. I Tried to do height:100% with position:abosulute but it does not seem to work. Please let me know how to get around this. Also an added bonus if you would like to help with it too is creating a animation so that the items on the nav appear with a small delay and fade-in.
Thanks
I want it to look similar to the MENU/Navigation on www.domanistudios.com/mobile/

You can use jQuery to find the height of the browser window and then you can apply this height to the ul element. A simple example for this
fiddle: http://jsfiddle.net/8hKEd/
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#clickme').click(function(){
$('#showme').css({'height' : $(window).height()});
$('#showme').slideToggle('slow');
});
});
</script>
</head>
<body>
<a id="clickme" href="#">Click Me</a>
<ul id="showme" style="display:none; background-color: #000; color: #fff;">
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
</ul>
</body>
</html>

You need to increase the height of the ul rather than the height of body. body has height based on the elements in it. Increase the height of ul menu class to 1000px. That should give you what you need.
.menu ul {
display: none;
height: 1000px;
}

Related

Is there a library or a way to implement 'the background drag'? [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 3 years ago.
Improve this question
I want to create a background with Google Maps' fucntionallity.
So here is the idea:
I haven't found any library but I guess it can be solved by css grid.
Can you help me with a piece of advice or just to say how theoretically it can be solved?
You could use jQuery draggable. What you can do is have a container div with the overflow set to hidden and have a draggable image (your background) inside:
$("#draggable img").draggable();
#div1 {
height: 400px;
width: 400px;
background-color: blue;
overflow: hidden;
}
.image {
margin-top: -400px;
margin-left: -400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<span class="move" id="draggable">
<img src="https://placekitten.com/1600/1600" class="image"/>
</span>
</div>
If the snippet doesn't work here is the same code in jsfiddle.

how to click through a label? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a custom gantt chart which has a bar and a label on it. The bar of the chart is a a combination of small div and the label for the bar is placed in the first div.
I have created a rough version to simulate this here jsfiddle.I think the issue is due to pointer-event:none; not supported in IE. I have set the following property in CSS for label
<html>
<head>
<style>
.mylabel {
pointer-events: none;
left: 40px;
position: absolute;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
z-index: 2;
}
.rowDiv {
float:left;
width:30px;
height:30px;
z-index: -1;
}
</style>
</head>
<script>
function div1Click(){alert("Div1 clicked");}
function div2Click(){alert("Div2 clicked");}
function div3Click(){alert("Div3 clicked");}
</script>
<body>
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()"><label class="mylabel" >DiV 123</label></div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
</body>
</html>
On the click of each div it should open a popup corresponding to that div. However the label from the first div spans across all the other div. When i click on the label anywhere in div 2 or div 3, the click event for the first div is triggered instead of div 2 or Div 3.
The issue exist only in IE 10 and it works fine in Chrome.
Is there any way to make this work in IE 10.
Thanks in advance
Pointer events were introduced in IE11, so will not work in 10 or below.
Check out click-through-a-div-to-underlying-elements for some alternative ideas

Align Edges of Element in HTML CSS [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have several buttons which are displayed inline with <h3> tags. All <h3> tags are of equal length but still the edges of the buttons are not aligned.
I want to align the edges of buttons so that it looks plain.
suppose your code looks like this:
<h3>hello</h3><input type="button" value="hello"></br>
<h3>hello 2</h3><input type="button" value="wad adwadaw a"></br>
<h3>hello 4</h3><input type="button" value="1231245 5"></br>
<h3>hello 55</h3><input type="button" value="asdasdddd"></br>
then the css should be:
h3{
width:100px;
display:inline-block;
}
input[type="button"]{
width:300px;
display:inline-block;
}
is this what you wanted?
CSS
<style type="text/css">
h3{
background:orange;
padding:10px 20px;
display:inline-block;
margin:0px
}
</style>
HTML
<h3>Home</h3>
<h3>About Us</h3>
<h3>Contact</h3>
You Should be Provide Screenshot or Code Sample for Getting Proper Answer.
Note: Equal Edges with Same Length is not Possible if Button Content have not Same Width.

Adding a </br> every second list item? [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 have a list in which I need to had a break for every two elements:
Original:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Need:
<ul>
<li></li>
<li></li>
</br>
<li></li>
<li></li>
</ul>
Fiddle: http://jsfiddle.net/9uksT/
Is this possible with Jquery?
EDIT: Oh wow sorry for the question. I am also open to using CSS. I just need to have a space between every 2 pairs of list items
Don't abuse <br> tags this way. Give every second element a wider bottom margin using CSS:
.root ul li:nth-child(2n) {
margin-bottom: 1em;
}
http://jsfiddle.net/mblase75/9uksT/3/
That said, I would replace your <ul> sub-list with a definition list, which is more semantically correct in this case:
.root dl {
margin: 0 0 0 2em;
}
.root dl dd {
margin-bottom: 1em;
}
http://jsfiddle.net/mblase75/E7gAA/
You can use a class and jQuery to assign the class to the right elements
.menu-vertical li.even{
margin-bottom: 10px;
}
then
$('.menu-vertical > ul li:nth-child(2n)').addClass('even')
Demo: Fiddle
Note: As I shown in the comments it can be done using nth-child selector, but it is not supported by IE < 9
As described that would be invalid HTML, but you can add <br/> inside the end of every second <li> element
http://jsfiddle.net/TrueBlueAussie/9uksT/2/
$('ul:not(.root) li:odd').append("<br/> ");
Update:
As the question has now changed, to include CSS, I would not do it this way, but would use a selector to set a style on the LIs (as Arun P Johny shows). e.g.
$('ul:not(.root) li:odd').addClass('second')
This works on all browsers.

How could I implement something like "thesheepmarket" with CSS/JS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to make something similar to thesheepmarket.com in how they have a bunch of small images together, and when you scroll over one it pops out like that so you can see the image larger.
I would like to do this with CSS/JS.
Any help would be great.
So I can basically do everything, except I am not sure how to make the div popup a bit below:
#test {
height: 10px;
background: red;
width: 10px;
font-size: 1px; /* IE 6 */
}
#test:hover {
height: 100px;
width: 100px;
border-style: solid;
border-width: 1px;
}
$('#test').hover(function() {
console.log('hoved');
});
I am basically just looking for the best way to make the div popup below the one that it is currently hovering over.
consider using something like this plugin:
http://dropthebit.com/demos/photobox/
From the Plugin website:
HTML
<div id='gallery'>
<a href="http://www.somedomain.com/images/image1_large.jpg">
<img src="http://www.somedomain.com/images/image1_small.jpg" title="photo1 title">
</a>
<a href="http://www.somedomain.com/images/image2_large.jpg">
<img src="http://www.somedomain.com/images/image2_small.jpg" alt="photo2 title">
</a>
<a href="http://www.somedomain.com/images/image3_large.jpg">
<img src="http://www.somedomain.com/images/image3_small.jpg" title="photo3 title">
</a>
<a href="http://www.somedomain.com/images/image4_large.jpg">
<img src="http://www.somedomain.com/images/image4_small.jpg" alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
</a>
<a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
<img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg" title="PEOPLE ARE AWESOME 2013 FULL HD ">
</a>
</div>
JS
<script>
// applying photobox on a `gallery` element which has lots of thumbnails links. Passing options object as well:
//-----------------------------------------------
$('#gallery').photobox('a',{ time:0 });
// using a callback and a fancier selector
//----------------------------------------------
$('#gallery').photobox('li > a.family',{ time:0 }), callback);
function callback(){
console.log('image has been loaded');
}
// destroy the plugin on a certain gallery:
//-----------------------------------------------
$('#gallery').data('_photobox').destroy();
// re-initialize the photbox DOM (does what Document ready does)
//-----------------------------------------------
$('#gallery').photobox('prepareDOM');
</script>

Categories