placing flash object alongside with another div - javascript

I have a flash object which is 300x600. I want to place it horizontally with another div. swfObject creates it with style="display: block !important;", so I think that's the problem.
I've tried to use swfobject.createCSS to disable this, but it didn't work-out.
I'd be glad for help.

Here's how you can do it ...
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first">
<object width="300" height="315"
data="http://www.youtube.com/v/XGSy3_Czz8k">
</object>
</div>
<div id="second">
<h1>This is some second div</h1>
</div>
</div>
</body>
</html>

Related

Want a border around image when clicked on and the border removed after clicked on the second time

I want to make it so when you click on an image a border shows then when you click on it for the second time it goes away. I've tried many different ways, but first I can't figure out how to get the images to show initially without the borders (only when you click on them the border goes away). From there is when i want to border/disappear when clicked on.
Also, I know you can do in-line css styling in JS, but I don't want to do that. If it's needed though then let me know. I am still learning!
http://jsbin.com/joxuyez/1/edit?html,css,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>
CSS
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges {
border: 5px solid orange;
}
.apples {
border: 5px solid red;
}
.grapes {
border: 5px solid purple;
}
JS
$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
$('.oranges').css("border","none");
alert("You chose an orange!");
});
$('.apples').click (function(event) {
alert("You chose an apple!");
});
$('.grapes').click (function(event) {
alert("You chose grapes!");
});
Simply toggle a class with each click using toggleClass().
Here I updated your CSS a little, and shorten the script, to show how-to.
Why having a border already set, and just change color, you avoid the element from moving, which it otherwise does by default when changing its size.
Stack snippet
$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click( function(event) {
$(this).toggleClass("showborder");
if (this.className.includes('showborder')) {
alert("You selected " + this.className.replace(" showborder","") )
}
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges, .apples, .grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
Updated based on a comment.
If you would want to allow only one at the time, you could do something like this
Stack snippet
$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click(function(event) {
if ($(this).hasClass("showborder")) {
$(this).removeClass("showborder");
} else {
$(this).parent().find(".showborder").removeClass("showborder");
$(this).addClass("showborder");
if (this.className.includes('showborder'))
alert("You selected " + this.className.replace(" showborder","") )
}
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges,
.apples,
.grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
you can use .toggleClass with JQuery to handle removing and adding classes. Refer to this JSFiddle I put together. https://jsfiddle.net/xpvt214o/334757/
In JQuery you can make a click handler to target the exact box you're clicking with $(this)
Example:
var box = $(".box")
box.on("click", function(){
$(this).toggleClass('border')
})
If you need each box to be a different color you can do something like this:
.box.border{
border-width: 3px;
border-style: solid;
}
.box1{
border-color: orange;
}
.box2{
border-color: red;
}
.box3{
border-color: blue;
}
With this method, you can have a .border class whichcontrols the style and width of the border. The different classes such as .box1 can alter the border color.
<div>
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 31</div>
</div>
Assigned like that. Hope this helps.
As you are still learning, i have a solution for you in a simple way, though better methods are available but definitely this method will help you to understand whats happening. I have made couple of changes in your CSS and JS file.
It also available at https://jsfiddle.net/9s37v6tu/11/
$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
if($('.oranges').hasClass('orange-border'))
{
$('.oranges').removeClass('orange-border');
}
else
{
$('.oranges').addClass('orange-border');
}
alert("You chose an orange!");
});
$('.apples').click (function(event) {
if($('.apples').hasClass('apple-border'))
{
$('.apples').removeClass('apple-border');
}
else
{
$('.apples').addClass('apple-border');
}
alert("You chose an apple!");
});
$('.grapes').click (function(event) {
if($('.grapes').hasClass('grape-border'))
{
$('.grapes').removeClass('grape-border');
}
else
{
$('.grapes').addClass('grape-border');
}
alert("You chose grapes!");
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.orange-border {
border: 5px solid orange;
}
.apple-border {
border: 5px solid red;
}
.grape-border {
border: 5px solid purple;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>
$(function(){
$('.box').click(function(){
$('.main div').removeClass('border');
$(this).addClass('border');
var index = $(this).index();
if(index == 0){alert('YOU CLICKED RED BOX!!!');};
if(index == 1){alert('YOU CLICKED GREEN BOX!!!');};
if(index == 2){alert('YOU CLICKED BLUE BOX!!!');};
});
});
.box{
display:inline-block;
width:100px;
height:100px;
margin:10px;
}
.red{
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}
.border{
border:5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="main">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>

Get bottom offset of hidden div

I've tried to show the element div then get the offset and hide it again, also tried to left -9999 in style but neither is working.
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
console.log("Before: " spaceBelow);
$(this).show();
var spaceBelow = $(this)[0].getBoundingClientRect().bottom;
$(this).hide();
console.log("After: " spaceBelow);
Your proposed solution works fine for me in Vanilla JS.
Code:
function run(){
var test = document.getElementById("test");
test.style.display = "block";
alert(test.getBoundingClientRect().bottom);
test.style.display = "none";
}
<div style="display:none;" id="test"></div>
<button onclick="run();">Run</button>
You can not retrieve the position of a hidden element with "display: none" but you can use the property "visibility: hidden".
Here is the demo of the issue :
console.log($('div > div:eq(0)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(1)')[0].getBoundingClientRect().bottom);
console.log($('div > div:eq(2)')[0].getBoundingClientRect().bottom);
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%;"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; display: none"></div>
</div>
<div style="border: 1px solid black; padding: 50px">
<div style="border: 1px solid grey; height: 100px; width: 100%; visibility: hidden"></div>
</div>
</html>
You should also use the methods provided by jQuery.
Finding the position of bottom of a div with jquery

Angular Trigger Div Click based on condition

I need to disable click on certain divs based on some condition. Can anyone guide me please? Currently am using ng-disabled which is not working
Working Demo below for you to play
.aw-right-pane-content{height:200px; width:200px;}
.aw-dataType-selected{background:green;}
.charts{
height:30px; width:30px;
border:1px solid #ccc;
margin:20px 0 0 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<body>
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled = "chart.clickable"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
</body>
</html>
You cannot disable a div using ng-disabled the possible solutions are either you can add an ng-class for disabled elements with no cursor events or you can use a fieldset instead of div.
First Solution - Using ng-class and changing script handling clickable property
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
.disabled {
opacity: 0.4;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<div ng-click="(chart.clickable)? chart.selected = !chart.selected : chart.selected = chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected, 'disabled': !chart.clickable}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
Second Solution. Using fieldset instead if div.
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.aw-right-pane-content {
height: 200px;
width: 200px;
}
.aw-dataType-selected {
background: green;
}
.charts {
height: 30px;
width: 30px;
border: 1px solid #ccc;
margin: 20px 0 0 10px;
}
</style>
</head>
<body>
<div class="aw-right-pane-content" ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts">
<fieldset ng-click="chart.selected = !chart.selected" class="charts" ng-class="{'aw-dataType-selected':chart.selected}" ng-disabled="!chart.clickable"></fieldset>
<div class="aw-right-pane-charts-name"> {{chart.name}} - {{chart.clickable}}</div>
</div>
</div>
</body>
</html>
I will prefer the second one.
You can do it as follows :
<div class="aw-right-pane-content"
ng-init="chartsOfSelectedDatatype=[{name:'Chart1',selected:false,clickable:false}, {name:'Chart2',selected:false,clickable:true},{name:'Chart3',selected:false,clickable:true},{name:'Chart4',selected:false,clickable:false}]">
<div data-ng-repeat="chart in chartsOfSelectedDatatype" class="aw-right-pane-charts" >
<div ng-click="chart.clickable ? chart.selected = !chart.selected: ''" class="charts" ng-class="{'aw-dataType-selected':chart.selected}"></div>
<div class="aw-right-pane-charts-name"> {{chart.name}}</div>
</div>
</div>
You can apply a common class over elements that need not be clicked and apply pointer-events: none; to the same.
CSS should always be preferred in such cases instead of Javascript.

Making a custom right click menu and binding it to a right click inside of another div

I need your help,
Without using long and code resource intensive jQuery and Javascript context menu plugins, how can one, just using plain & simple jQuery code to basically take my div (which has the id: 'right-click-menu') and bind a right click action to the other div which had the id: box1?
Here is a fiddle: http://jsfiddle.net/ALAHX/
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#right-click-menu {
width: 150px;
border-top: 1px solid rgb(212,208,200);
border-left: 1px solid rgb(212,208,200);
border-right: 1px solid rgb(64,64,64);
border-bottom: 1px solid rgb(64,64,64);
font-family: tahoma;
font-size: 8.5pt;
box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
list-style-type: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
background: rgb(212,208,200);
margin: 0;
padding: 2px
}
#right-click-menu ul li {
padding: 4px;
}
#right-click-menu li:hover {
color: #fff;
cursor: pointer;
background: rgb(10,36,106);
}
</style>
</head>
<body>
<div id="right-click-menu">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>
</html>
Javascript:
$(document).ready(function() {
$('#box1').mouseup(function(event) {
if (event.which == 3) { // right click
$('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
}
});
});
HTML: Be sure to include position: absolute for the menu to allow it to move around, and oncontextmenu to return false to prevent the default browser right-click.
<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
Fiddle:
http://jsfiddle.net/ALAHX/1/
You'll want to include things like hiding the menu at first and when options are selected, but this should get you started.
Looking at you comment, you may or may not have included jQuery in your project, which is a Javascript addon. The above code is written using jQuery, so make sure to include a <script> link to it in your HTML.
$(document).ready(function(){
$('div').click(function(){
$('#box1').slideToggle('slow');
});
});
Maybe something like this?

Drag and drop div

I have few classes in my web page which i would the users to drag and place it where ever they want in the page.
HTML CODE
<html>
<head>
<style>
#drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
#drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
#drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
#drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
</style>
</head>
<body>
<div id="drag">
<p>Drag me around</p>
</div>
<div id="drag1">
<p>Drag me around</p>
</div>
<div id="drag2">
<p>Drag me around</p>
</div>
<div id="drag3">
<p>Drag me around</p>
</div>
</body>
</html>
i want the simplest jquery code to implement this feature. please assist
You Should use the draggable plugin in jquery UI
$('#drag1').draggable();
Jquery Example
For more information follow below link
StackOverflow
Or :
Draggable Example
You can use the draggable plugin in jquery UI
$('#drag1').draggable();
I agree, you could use jqueryUI's draggable.
For your html example, you can do it this way:
$("body > div").draggable();
You can also add a class to all draggable divs, say "draggable-container". And use:
$(".draggable-container").draggable();
Okay I will guide you step by step :
You need to have two external files in your head part.
The first one being jquery and the second one is jquery ui
You can select any div and add the draggable option to it like this $("#drag").draggable();
See for errors like c.browser is not defined and c.curPos is not defined in the firebug window.
These errors may arise due to jquery version you are using, as c.browser was removed in jquery 1.9.
Your final draggable code should look like this in a fiddle.
http://jsfiddle.net/LHELM/
Here the full code of jquery drag and drop
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).on("ready", function(){
var c = 5;
$( "#drag, #drag1, #drag2, #drag3" ).draggable({revert: true});
$( "#droppable" ).droppable({
accept : '#drag, #drag1, #drag2, #drag3',
activeClass : 'drag-active',
hoverClass : 'drop-hover',
drop: function( event, ui ) {
var source = ui.draggable.clone();
source.removeAttr( "style" );
var style = {
position: "absolute",
top: c,
left: c
}
source.css( style );
$("#droppable").append(source);
c += 10;
}
});
});
</script>
<style>
#drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
#drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
#drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
#drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
#droppable{ width: 150px; height: 150px; border: 1px solid black;position:absolute;top:0;right:0;}
</style>
</head>
<body>
<div id="drag">
<p>Drag me around</p>
</div>
<div id="drag1">
<p>Drag me around</p>
</div>
<div id="drag2">
<p>Drag me around</p>
</div>
<div id="drag3">
<p>Drag me around</p>
</div>
<div id="droppable">
<p>drop here</p>
</div>
</body>
</html>

Categories