I have a lots of pages structured like this:
<body>
<table><tr><td align="center" width="100%">
--PAGE HTML--
</td></tr></table>
</body>
And I have to change those the page to the following structure for a short period of time:
<body>
<div style="width: 100%; min-height: 960px; text-align: center;">
--PAGE HTML--
</div>
</body>
So I decided to use jQuery.
Here is my code.
$(document).ready(function(){
var PageHtml = $("td:first").html();
$("table:first").remove();
console.log(PageHtml);
$("body").html('<div style="width: 100%; min-height: 960px; text-align: center;">'+PageHtml+'</div>');
});
The problem is that instead of having the expected result I have
<body>
<div style="width: 100%; min-height: 960px; text-align: center;"></div>
</body>
(I don't have the page html in the div element)
Now for diagnostic purposes I added the line console.log(PageHtml); And it does return the correct HTML string.
I'm out of ideas to make this work, any suggestions?
Thanks for any help.
Try the following:
var $div = $("<div />").css({
'width': '100%',
'min-height': '960px',
'text-align': 'center',
'color': 'red'
});
$div.appendTo('body');
$div.html($("td:first").html());
$("td:first").remove();
Related
My problem is i want to make this post in one line and scroling on the x and the y hidden
My html
<div id='related-post'>
<div class='relhead'>
<h5><span>أنميات أخرى</span></h5>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?
alt=json-in-script&callback=relpostimgcuplik&"'
type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>relatedscript();</script>
</ul>
</div>
</div>
My css`
#related-post { display : inline-block; font-family: 'jsbold'; font-size:
14px; padding-bottom: 7px; border-bottom: 4px solid $(main.color); line-
height: 18px; font-weight: 700; color: #111; text-transform: uppercase;}
My java script
<script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 8;
var numchars = 90;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function relatedscript(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
I'm kind of confused on what you're asking. This can probably be done with just CSS. Can you use inspect element and copy the code it produces when the page is loaded or paste a link to your page where the script is being used so I could take a look.
From what I think you're asking you could try doing something like this
<div class="container">
<div class="container-inner">
<div class="item"></div><div class="item"></div><div class="item"></div>
</div>
</div>
CSS:
.container {width:100%}
.container-inner {width:200%}
.item{float:left}
Just make sure your inner container is wider than your outer container and that should give you the scrolling effect you're looking for. Hope this helps
I am trying to do a popup on hover on a link, I found and tried the code which is as below:
<html>
<head>
<style>
.box{
display: none;
width: 100%;
}
a:hover + .box,.box:hover{
display: block;
position: relative;
z-index: 100;
}
</style>
</head>
<body>
Bootstrap
<div class="box">
<iframe src="http://getbootstrap.com/" width = "500px" height = "500px">
</iframe>
</div>
</body>
</html>
I got the output from the above code, Now I want to try it in the MVC, I tried to do it, below is my MVC Code:
<div class="col-md-6">
#if (#item.Linkreviewsothersite != null)
{
<p class="readmore text-right"><a id="showreview" href="#item.Linkreviewsothersite"> Reviews</a></p>
<div id="reviewbox" class="embed-responsive-4by3 hidden">
<iframe class="embed-responsive-item" src="http://getbootstrap.com/"></iframe>
</div>
}
</div>
$('#showreview').hover(function () {
$('#reviewbox').css({
display: "block",
position: "relative",
zindex: "100"
});
})
when I tried to do it in the above code I'm missing something, can someone help me plz..
A simpler way of achieving this would be to use:
<div id="hoverMe">Hover over here</div>
<iframe id="tooltip" src="http://jsfiddle.net"></iframe>
jQuery - see Demo
$('#hoverMe').hover(function () {
$('#tooltip').fadeIn();
}, function () {
$('#tooltip').fadeOut();
});
See here for reference
I have but zero appitude to code anything. I am trying to build a small simple website and am almost done but have one little issue left to solve. I know this has been asked here before and I have tried to figure out how to make there circumstance work for me but can't. I have even tried the easy jquery fade in and fade out methods but can't get the id's correct or something?
All I want to do is fade in and out between the divs when the links are clicked.
I have tried and reviewed many examples here and still can't get it to connect at all.
Any help would be appreciated.
I have three links on a page that loads three different divs into a container. Everything is on the same page and everything works great other than I can't get them to fade in and out when the links are clicked. I have no problem loading the jquery library and doing it that way if that works best.
<head>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3 {
display:none;
overflow:hidden;
background-color: #E6E1E6
</style>
</head>
<body style="background-color: #E6E1E6">
<div id="container" style="position: fixed; width: 100%; z-index: 200;" >
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" style="position: fixed; width: 100%; height: auto;" >
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
</div>
</body>
</html>
You mentioned using jQuery, this is a basic idea. Comments in code should explain what is happening. I altered the HTML a little by adding some classes and some data attributes.
$("#linkDiv").on("click", "a", function(evt) { //use event bubbling so there is only one click hanlder
evt.preventDefault(); //stop click event
var anchor = $(this); //get the link that was clicked on
if (anchor.hasClass("active")) { //If has the class, it is already is active, nothing to do
return;
}
anchor.siblings().removeClass("active"); //find previous selectd link and unselect it
anchor.addClass("active"); //add class to current link and select it
var showTab = anchor.data("tab"); //read the data attribute data-tab to get item to show
var visibleContainer = $(".tab-container:visible");
var complete = function() { //function to call when fade out is complete
$(showTab).stop().fadeIn(300);
};
if (visibleContainer.length) { //make sure w have something to hide
$(visibleContainer).stop().fadeOut(100, complete); //if we do, fade out the element, when finished, call complete
} else {
complete(); //if first time, just show it
}
}).find("a").eq(0).trigger("click"); //click on first link to load tab content.
.tab-container {
display: none;
overflow: hidden;
}
#container1 {
background-color: #E60000;
}
#container2 {
background-color: #00E100;
}
#container3 {
background-color: #0000E6;
}
a.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" style="position: fixed; width: 100%; z-index: 200;">
<div id="linkDiv" style="z-index: 100; position: absolute; width: 100%; text-align: center; font-family: Arial, Helvetica, sans-serif; margin-top: 20px;">
The Original Woman
CREDIT
CONTACT
</div>
</div>
<!-- The 4 container content divs. -->
<div id="divLinks" style="width: 100%; height: 100%">
<div id="container1" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 60%"> </td>
<td class="auto-style1" style="width: 40%">
<img height="auto" src="asencio%20(7).jpg" width="100%" /> </td>
</tr>
</table>
</div>
<div id="container2" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 50%">
<img height="auto" src="mukai.jpg" width="100%" /> </td>
<td style="width: 50%"> </td>
</tr>
</table>
</div>
<div id="container3" class="tab-container" style="position: fixed; width: 100%; height: auto;">
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 37%">
<img height="auto" src="pandora_by_alifann.jpg" width="100%" /> </td>
<td style="width: 62%"> </td>
</tr>
</table>
</div>
Here's a simple example using jQuery - Not sure what you're end product is meant to look like but this should set you on the right foot.
Here's a sample snippet of the JS:
$(document).ready(function(){ //Wait for DOM to finish loading
$('.navigation a').click(function(){ //When the a link is clicked
var id = $(this).attr('href'); //grab its href as the ID of the target object
$('.hidden-content').fadeOut(500); //Fade out all the divs that are showing
$(id).fadeIn(500); //Fade in the target div
return false; //Prevent the default action of the a link
});
});
Check out the jsFiddle here: http://jsfiddle.net/pavkr/7vc2jj5j/
Here is some quick script to do the fading, but i would suggest you to use jQuery for same since it will be cross-browser.
Just update your script block, and it will work, no need to change any other code
Vanilla JS
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
fadeIn(document.getElementById('container'+idInfo), 20);
}
function fadeIn(element, duration) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
//alert("here");
}, duration);
}
</script>
Using jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv(idInfo) {
$('#divLinks div').hide(200, function(){
//Show the clicked
$('#container'+idInf).fadeIn(200);
});
}
</script>
I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?
You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>
Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})
Hello stackoverflow comunity.
I am working on some code that makes draggable resizeable divs. I have it working with the divs that are created originally, but the newly added divs arent becomming draggable.
Here is ALL my code:
<html>
<head>
<script>
var id = 4;
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
}
function change(div)
{
var divw=parseInt(div.style.width);
var divh=parseInt(div.style.height);
var imgw=divw-10;
var imgh=divh-10;
div.children[0].style.width=imgw;
div.children[0].style.height=imgh;
div.style.border="dotted 3px grey";
}
function addimg()
{
var main = document.getElementById('main');
var div = document.createElement('div');
div.onmouseout = function() {this.style.border=0};
div.ondragstart = function() {drag(event)};
div.onmousemove = function() {change(this)};
div.setAttribute('draggable', true);
div.id = 'div'+id;
id+=1;
div.style.styleFloat = 'left';
div.style.cssFloat = 'left';
div.style.resize = 'both';
div.style.overflow = 'hidden';
div.style.height = '110px';
div.style.width = '110px';
div.innerHTML = '<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />';
main.appendChild(div);
}
</script>
</head>
<body>
<center>
<div ID="main" ondragover="event.preventDefault()" ondrop="drop(event)" style="width:900px; height:900px; border: dashed 1px lightgrey;" overflow="auto">
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div1" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<textarea onblur="this.nextElementSibling.innerHTML=this.innerHTML" style="resize:none; width: 100px; height: 100px"></textarea>
<p style="background-color: blue"></p>
</div>
<div style="clear:both"></div>
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div2" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div3" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
</center>
<button onclick="addimg()">add an image</button>
</body>
</html>
the issue is that the new divs aren't draggable.
P.S. if you use jquery, please explain it very detailed, i have no experience with it.
I m not sure what draggable function in this case is. Is it just dragging this newly added image to this element in top left ? After what that image disappear ?
If this is case, solution is very simple. In function addimage you have wrong line.Your line is:
div.ondragstart = function() {drag(event)};
And it should be
div.ondragstart = function(event) {drag(event)};
In this line you call function without setting event as argument, and you use it in function.
Hope it helps.
One solution is to use the same method used to create the <img> element, to create the <div>:
<html>
<head>
<script>
var id = 4;
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
document.getElementById('main')
.appendChild(document.getElementById(ev.dataTransfer.getData("Text")));
}
function change(div) {
var divw = parseInt(div.style.width);
var divh = parseInt(div.style.height);
var imgw = divw - 10;
var imgh = divh - 10;
div.children[0].style.width = imgw;
div.children[0].style.height = imgh;
div.style.border = "dotted 3px grey";
}
function addimg() {
var main = document.getElementById('main');
main.innerHTML += '<div id="div'+id+'" onmouseout="this.style.border=0" draggable="true" ' +
'ondragstart="drag(event)" onmousemove="change(this)" style="float:left; ' +
'resize:both; overflow:hidden; height: 110px; width:110px"></div>';
div = document.getElementById('div'+id);
div.innerHTML = '<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />';
id+=1;
}
</script>
</head>
<body>
<center>
<div ID="main" ondragover="event.preventDefault()" ondrop="drop(event)" style="width:900px; height:900px; border: dashed 1px lightgrey;" overflow="auto">
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div1" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<textarea onblur="this.nextElementSibling.innerHTML=this.innerHTML" style="resize:none; width: 100px; height: 100px"></textarea>
<p style="background-color: blue"></p>
</div>
<div style="clear:both"></div>
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div2" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div3" style="float:left; resize:both; overflow:hidden; height: 110px; width:110px">
<img draggable="false" style="width: 100px; height: 100px" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
</center>
<button onclick="addimg()">add an image</button>
</body>
</html>
This should ensure the browser renders the new <div> element in the same way as the existing ones. In addition ensuring that elements are appended back to the main <div> element when they are dropped, will prevent them from disappearing when dropped onto of other elements, as previously.
Using Jquery
On the tip of using jquery, if we include the jquery.min.js library at the top of the file:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
The change() function can be rewritten as:
function change(div) {
var $div = $(div);
$div.css('border','dotted 3px grey')
.children( ':first' )
.width( $div.width() - 10 )
.height( $div.height() - 10 );
}
This is somewhat shorter than the original. The first line converts the div parameter into a jquery object and stores it in the $div variable. The $ at the beginning of the variable name is just a convention, as the variable contains a jquery object. Caching the jquery object in this variable is more efficient than using $(div) 3 times in the change() function.
Calls to$div.width() and $div.height() perform the same action as the parseInt() calls in the original function. Jquery allows function calls to be 'chained', thus the first call on $div sets the border style and returns the same $div object. The .children() call returns the first child of $div (the <img> element) which then has it's width and height set using the corresponding methods.
It should be noted that jquery is generally thought to be easier to use, and offer good cross browser compatibility (which can be a real headache) rather than more efficient.
Moving style out of elements
We can move the common style attribute out of the individual elements into a separate section in the <head> of the html:
<style>
#main {
width:900px;
height:900px;
border: dashed 1px lightgrey;
overflow: auto;
}
.dragDiv {
float: left;
resize: both;
overflow: hidden;
height: 110px;
width: 110px;
}
.dragDiv img {
width: 100px;
height: 100px
}
.dragDiv textarea {
resize: none;
width: 100px;
height: 100px;
}
</style>
By giving the drag-able <div> elements the class dragDiv we reduce the amount of style duplication:
<div id="main" ondragover="event.preventDefault()" ondrop="drop(event)">
<div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div1">
<textarea onblur="this.nextElementSibling.innerHTML=this.innerHTML"></textarea>
<p style="background-color: blue"></p>
</div>
<div style="clear:both"></div>
<div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div2">
<img draggable="false" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="dragDiv" onmouseout="this.style.border=0" draggable="true" ondragstart="drag(event)" onmousemove="change(this)" id="div3">
<img draggable="false" src="https://www.google.com/images/srpr/logo11w.png" />
</div>
</div>
Is this something like what you are looking for? I'm happy to suggest more alterations, if required.
Jquery offers draggables - which use absolute positioning; resizables; and sortables - which offer similar 'snap on drop' behaviour as the code above. Although I don't suggest you use these instead, they might be good guides as to how you wish your code to behave.