CSS <div> Wrapping error - javascript

I have <div> called container which are wrapping couple of <div>s called block and I used a jquery plugin called columnizer to split the block into column.The problem is , I can't seem to make the <div> called container wrap the blocks which are going over the div .I also got picture to demonstrate my problem.
I tried alot of solutions like , removing the container width but it doesn't work because the jquery plugyin called columnizier need a width i think.
My html
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
<script type="text/javascript">
$(function(){
$('h1').addClass('dontend');
$('.wide').columnize({
width : 100,
height : 300
});
});
</script>
<script style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
{var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
{for(var plugin in this[developer])
{if(this[developer][plugin]&&this[developer][plugin].onsave)
{path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*#cc_on!#*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
{var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
else if(document.write)
{document.write('<'+'script type="text/javascript" src="'+path+'&serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
Mint.SI.Referrer={onsave:function()
{var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script>
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="b.css">
<div class="container"> <div class="wide">
<div class="block"></div><br>
<div class="block"></div><br>
<div class="block"></div><br>
</div></div>
My css
.container {
background-color: #ED8713;
height: 300px;
width: 200px;
}
.block {
width: 50px;
height:250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}

Here it is working: http://jsfiddle.net/gRxdF/3/
CSS:
.container {
background-color: #ED8713;
height: 300px;
float: left;
}
.block {
display: inline-block;
height: 250px;
background-color: #C31212;
margin: 10px;
margin-top: 5px;
}
HTML - I removed the <br>tags.

Related

href link not working with innerHTML script with "onmouseover change text" and onmouseout

My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.
The code below works in changing the text from "hello" to "Google" but,
the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.
Thanks for your help in advance!
Here is my code:
<style>
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
</style>
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
</h1>
</div>
<script>
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
</script>
try this way onmouseout="this.innerHTML='Hello.';"
function changeText() {
if (document.getElementById("hello1")) {
a = document.getElementById("hello1")
a.innerHTML = 'Google'
}
}
.container {
margin-top: 6vw;
margin-left: 40%;
margin-right: 40%;
}
<div class="container">
<h1>
<div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
</h1>
</div>
By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.
The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:
<div onmouselame="lameAttributeEventHandler()">...</div>
Details are commented in the example below
// Reference the <header>
const hdr = document.querySelector('.title');
/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
// '.google' class is added
// '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
this.classList.add('google');
this.classList.remove('hello');
};
/* This is an even listener
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
this.classList.add('hello');
this.classList.remove('google');
});
.title {
height: 50px;
margin-top: 3vh;
border: 3px solid black;
text-align: center;
}
h1 {
margin: auto 0;
}
.hello span {
display: inline-block;
}
.hello a {
display: none;
}
.google a {
display: inline-block;
}
.google span {
display: none;
}
<header class="title hello">
<h1>
<span>Hello</span>
Google
</h1>
</header>
You can try this, May it help u to solve the problem
<!DOCTYPE html>
<head>
<title>change text on mouse over and change back on mouse out
</title>
<style>
#box {
float: left;
width: 150px;
height: 150px;
margin-left: 20px;
margin-top: 20px;
padding: 15px;
border: 5px solid black;
}
</style>
</head>
<html>
<body>
<div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
<div id="text-display" >
any thing
</div>
</div>
<script type="text/javascript">
function changeText(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
function changeback(text)
{
var display = document.getElementById('text-display');
display.innerHTML = "";
display.innerHTML = text;
}
</script>
</body>
</html>

Positionning a jquery table paginator

I'm using this pagination plugin http://www.jqueryscript.net/table/Easy-Table-List-Pagination-Plugin-With-jQuery-Paginathing.html
But I have a problem : I couldn't place the paginator where I want exactly! Please how can I fix this or is there any other plugin that we can change its position?
Here is my script :
$('#archTab').paginathing({
perPage:3,
limitPagination:{{ content|length // 3 }},
insertAfter: ('span#paginator')
});
And I have a span under the table :
<span id="paginator" style="position: absolute;top: 40vmin;"></span>
try margin-top
var content = 10;
$('#archTab').paginathing({
perPage:3,
limitPagination:content|length, //03
insertAfter: ('#paginator')
});
#archTab{
position: absolute;
background: red;
}
#paginator{
margin-top: 40vmin;
/*test*/
padding: 5px;
background: orange;
}
.pagination-container{
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Easy-Table-List-Pagination-Plugin-With-jQuery-Paginathing/paginathing.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="archTab">
<div id="paginator"></div>
</div>

Function on resize doesn't work

Hello I have problem with really easy script. It should change class if under 768 px of window width but it just doesn't work. I have no clue why. I dont want to use media queries in this in this case.
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ez</title>
<style>
.aside {
float: left;
height: 1000px;
width: 250px;
background-color: grey;
}
.sidebar {
position: absolute;
top: 0;
left: -250px;
}
</style>
</head>
<body style="height: 2000px">
<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>
<script>
var elm = document.getElementById("aside");
function change() {
var w = window.innerWidth;
if(w<768) {
elm.className = "sidebar";
} else {
elm.className = "aside";
}
}
window.addEventListener("resize", change);
</script>
</body>
</html>
I started your script. For 768px and more there is class 'aside', for 767px and less class 'sidebar'. So where is the problem?
If you open page on width less than 768 your script won't be working correct. You have to add it to event onload too

Jquery: show IMG on click

Preview of how it should be: https://www.youtube.com/embed/8qKRf0cg3Co
As in the video, I have to click on the img to get a large view of the img under it.
So far this is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JQUERY</title>
<script src="jquery/jquery-2.1.1.min.js"></script></head>
<body>
<center>
<div id="wrapper">
<div id="nav">
<div id="overbalk"></div>
<img src="images/foto_01.png" align="top" class="foto" />
<img src="images/foto_02.png" align="top" class="foto" />
<img src="images/foto_03.png" align="top" class="foto" />
<img src="images/foto_04.png" align="top" class="foto" />
</div>
<div id="content">
<img src="images/foto_01.png" align="top" class="slide_foto" />
</div>
</div>
</center>
</body>
</html>
CSS:
<style>
body {
padding: 0;
margin: 0;
background-color: black;
}
#nav {
width: 600px;
margin: 0px auto;
}
#overbalk {
width: 600px;
height: 30px;
position: absolute;
background-color: black;
}
.foto {
width: 75px;
height: 75px;
margin-top: -20px;
border: 1px solid black;
}
.foto:hover {
cursor: pointer;
}
#content {
position: absolute;
top: 50px;
z-index: -2;
width: 100%;
}
.slide_foto {
margin-left:-3200px;
}
</style>
JS:
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
});
$('.foto').click(function () {
$(this).next('#content').show();
});
});
I also tried this:
$('.foto').on('click', function () {
$('#content').html(nieuwe_foto).show();
var nieuwe_foto = $(this).attr('src');
$('.slide_foto').attr('src', nieuwe_foto);
}
None of this worked, and got a little bit stuck, the images aren't showing below the small images.
You need to make 2 changes:
Remove this style class from <style>
.slide_foto {
margin-left:-3200px;
}
Make this change in your onclick handler
$('.foto').on('click', function () {
var nieuwe_foto = $(this).prop('src');
$('.slide_foto').prop('src', nieuwe_foto);
});
I have made a working fiddle with sample images https://jsfiddle.net/sachin_puthran/c2qgjpj1/
The following doesn't do anything since nieuwe_foto is undefined until the next line and div#content is already visible .show() doesn't do anything either.
$('#content').html(nieuwe_foto).show();
The .show() isn't what you're looking for. It will essentially "unhide" an element. So if an element has a display: none style then .show() will restore the initial display style. See the docs.
You're closer with your second attempt though. All you want to do in the $('.foto').click function is set the src of the .slide_foto element to what is currently in the src of the this object.

Simple dojo example Error: this.domNode is null

Referring to jsFiddle's [code][1] by CSWING,
why does this indicate "TypeError: this.domNode is null (26 out of range 15) in dojo.js".
Here is my code copied from CSWING, for learning and testing,
<!DOCTYPE html>
<html>
<head>
<style>
html, body /*standard layout for every dojo webpage*/
{
width: 100%;
height: 100%;
padding: 0px;
margin: 5px;
overflow: hidden;/*no scrollbar used*/
}
#standby {
position: absolute;
top: 50%;
left: 50%;
width:32px;
height:32px;
margin-top: -16px;
margin-left: -16px;
/*
width: 300px;
height: 300px;
background-color: #e7e7e7;
*/
}
</style>
<link rel="stylesheet" href="../dojo1_8/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="../dojo1_8/dojo/dojo.js"></script>
</head>
<body class="claro">
<div id="standby">
<div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label:
Go'"></div>
</div>
<script>
require(["dojox/widget/Standby","dijit/form/Button",
"dojo/store/Memory",'dijit/form/ComboBox',
"dojo/on", "dojo/domReady!"],
function(Standby, Button, Memory, on, ComboBox)
{
var standby = new Standby
({
id: "standbyObj",
target: "btn",
color: "transparent",
zindex: "auto",
duration: "1000"
});
dojo.body().appendChild(standby.domNode);
standby.startup();
on(dojo.byId('btn'), 'click', function()
{
standby.show();
//simulate a request. hide the timeout in 5 seconds
setTimeout(function()
{
standby.hide();
}, 5000);
});
});
</script>
</body>
</html>
Please advise.
Thanks
clement
[1]: http://jsfiddle.net/cswing/253Te/
Looking at my original fiddle, I believe that
dojo.byId('btn')
should be
dijit.byId('btn')
If that doesn't solve your problem, then I would set firebug to Break on Errors. When the error occurs, look at the stack trace to find more information about where the error is coming from and what might be causing it.

Categories