is it possible to combine a canvas and a div i have tried to work them together but i cant get it to work
here is my Div
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
this is canvas
<canvas id=demo width=400 height=300></canvas>
here is the complete code it is not mine please view How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
You can place both in a container and use absolute positioning, as so:
<div id="container">
<canvas id=demo width=400 height=300></canvas>
<div href="#" class="item" data-bind="draggable:true,droppable:true">
<span data-bind="click:$parent.remove">[x]</span><br/><br/>
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
</div>
</div>
and then in the style sheet:
#container {
position: relative;
}
#demo, div[href="#"] {
position: absolute;
top: 0px;
left: 0px;
}
Related
I have an image in my div.Image is nothing looking like box.Now i want to insert bar chart(highchart library dynamic content) over the image.I mean inside that box image.How to do that?
What i have tried
<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>
here card1.png is box image.There are three cards,i need to insert 3 charts inside the 3 boxes individually.
Code you sent is really ugly and isn't using CSS the right way.
You want to separate CSS in another file and include it to your html with LINK tag. You want to use cascading style sheets, so you don't have to repeat same code so many times.
But if you want to stick to this type of code you can do it this way:
<div class="" style="position:relative; width: 400px; height: 750px;">
<div style="position:absolute; top:0; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:0; left:0; z-index: 2;">
Your first chart goes here
</div>
<div style="position:absolute; top:250px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px; left:0; z-index: 2;">
Your second chart goes here
</div>
<div style="position:absolute; top:500px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px; left:0; z-index: 2;">
Your third chart goes here
</div>
</div>
Do something like this:
<div style="background-image: url(); background-size: ; background-repeat: no-repeat;">
<p>whatever you want to put inside</p>
</div>
I suggest making the div have a class and doing all the css code in a .css document
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
Say I have a few divs that look like this:
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
is it possible to take the hrefs and move them to the Box class without having to use nth-child in the script?
I assume you like to make the whole outer div area clickable.
I solved this as follows.
$(document).ready(function () {
$('[data-clickable-area]').click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).find('a').first().trigger('click');
});
$('[data-clickable-area] a').click(function (e) {
// triggering the default handler of browser did not succeed
window.location = $(this).attr('href');
e.stopPropagation();
});
});
[data-clickable-area] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
Only one link for every box is supported in my solution.
Based on your comment, in that case I would use a CSS only approach. Since your client wants it on Mobile anyways simple make the parent container position relative and make the link you want to be clickable position absolute with a higher z-index and make it fill the container like so:
/*Demo styling */
.Box {
height: 200px;
width: 200px;
background: #f0f0f0;
}
body > * + * {
margin-top: 10px;
}
/*Suggested styling */
#media screen and (max-width: 1024px) {
.Box {
position: relative;
}
.Box .Link {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
}
}
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/. Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/
-Thanks for the help!
<div class="div1">
</div>
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
your fiddle isn't loading for me, but based in this code it would be like this:
#sliderFrame {
position: relative;
width: 960px;
margin: 0px auto;
left: -30px;
}
where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like
<div class="slide_contain">
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
</div>
Now in your CSS, you add this:
.slide_contain {
position:relative;
width:960px;
height:auto;
min-height:300px
}
#sliderFrame {
position: absolute;
width: 960px;
margin: 0px auto;
left: -30px;
}
This method will allow you to have better control and avoid problems when moving the sliderFrame div
I'm building a file system that loads a folder/file tree from a javascript object. It works very well, but right now I'm trying to constrain the whole thing to a box that I can scroll around. The issue is that the box (.explorer) is constraining the files and folders' widths to it's own width. The file and folder text isn't constrained, only their background colors are.
Here is the CSS and HTML. I hope you can help.
.explorer{
width:100px;
height:100px;
margin:35px;
float:left;
overflow:auto;
}
.folder, .file{
width:100%;
padding:4px 6px;
cursor: pointer;
Background:#212121;
color:#fff;
}
.file{
Background:#eb9824;
}
.hide, .show{
margin-left:20px;
}
And a section of the rough HTML generated by javascript
<div class="explorer">
<div class="folder">root</div>
<div class="show" id="rootcontents">
<div class="folder" id="root-folder1">folder1</div>
<div class="show" id="root-folder1contents">
<div class="folder" id="root-folder1-folder1">folder1</div>
<div class="hide" id="root-folder1-folder1contents" style="display: block;">
<div class="folder" id="root-folder1-folder1-folder1">folder1</div>
<div class="hide" id="root-folder1-folder1-folder1contents" style="display: block;">
<div class="file" id="root-folder1-folder1-folder1-file1">file1</div>
<div class="file" id="root-folder1-folder1-folder1-file2">file2</div>
</div>
</div>
<div class="folder" id="root-folder1-folder2">folder2</div>
<div class="hide" id="root-folder1-folder2contents" style="display: none;">
<div class="folder" id="root-folder1-folder2-folder1">folder1</div>
<div class="hide" id="root-folder1-folder2-folder1contents" style="display: none;">
<div class="file" id="root-folder1-folder2-folder1-file1">file2</div>
<div class="file" id="root-folder1-folder2-folder1-file2">file2</div>
</div>
</div>
</div>
</div>
</div>
I'd call that a bug. The .explorer box has a background that fits the container, not the content, which is unusual and undesired.
The quick fix in your case is to insert a dummy div right inside the .explorer, and set style="float: left", which will prompt the browser to recalculate the box size from its children, instead of its parent's width.
http://jsfiddle.net/G9v4w/2/