Is it possible to get the state of movement in CSS, without JQuery, and use it for hiding the scrollbar?
This should be achievable trough jQuery
Scrollevent with jQuery:
https://api.jquery.com/scroll/
Scrollevent Stop:
jQuery scroll() detect when user stops scrolling
Hide Scrollbar:
Hiding the scrollbar on an HTML page
In the end, the could may look like this (not tested):
<script>
$( window ).scroll(function() {
//Show scrollbar
$( "body" ).css( "overflow", "scroll" );
// Check if we are still scrolling, else hide scrollbar
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// Scrollevent not happened, hiding Scrollbar
$( "body" ).css( "overflow", "hidden" );
}, 250));
});
</script>
Related
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>
I'm trying to make a "help center" in HTML and i need to change the background when i hover on a selection, a div, I "figured" it out a little, but I have a problem, when I hover on the div I made the background change, but it hides everything else when i hover on the div, like for example, the div that changes the background is on the top of all others, so it hides all of them... There the JsFiddle
So I want to change the body background if possible, or make like i made and put a div as a background, to change it. I tried to make it like this:
selection:hover>body{
background-image:url(DIR);
}
But... doesn't work... So yeah, thanks to give it a try!
This is easy to implement with jQuery, which is a popular javascript library
I would do something like
$( "#someID" ).hover(
function() {
$( "#anotherElement" ).css( "background-color", "red" );
}, function() {
$( "#anotherElement" ).css( "background-color", "white" );
}
);
which will target the element with ID "someID" and then set the background-color of "anotherElement" to red while you hover over "someID", and set it back to white once you leave. You could also just target the "body" element, by doing:
$( "#someID" ).hover(
function() {
$( "body" ).css( "background-color", "red" );
}, function() {
$( "body" ).css( "background-color", "white" );
}
);
To include jquery in your HTML document you can load the jquery library from google's cdn by adding
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
in your html document.
To call the code above, wrap it in a self-calling function like so:
<script>
(function(){
CODE GOES HERE
})();
</script>
If this does not immediately make sense to you, you should read this: Short Introduction to jQuery
I haven't tested the code, so there might be typos or mistakes, but the concept is usable ;)
EDIT: I have now tested my code.. It does work, please see below
<!doctype html>
<html>
<head>
</head>
<body style="background-color:white">
<div id="someID">
<p>If you hover over this the color changes</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function(){
$( "#someID" ).hover(
function() {
$( "body" ).css( "background-color", "red" );
}, function() {
$( "body" ).css( "background-color", "white" );
}
);
})();
</script>
</body>
</html>
image link - webpage image
I want to remove all the spaces but can't do so.
i also want the sidebar to be of the same height as Content
Thankyou!
I don't know what's wrong with it
should i make a single sidebar instead of 3?
CODE
HTML5 and CSS3 code
http://www.mediafire.com/download/70p421je5uv2a4m/Theme.rar
THank you!!! :D
You can set background for element that contain your sidebar and content:
<div style="background:#fff">
<div id="content"></div>
<div id="sidebar"></div>
</div>
http://codepen.io/Chovanec/pen/hcAmH
In case you want the height of the content responsive, and the sidebar change responsive along with it, you can try a jQuery solution
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
$( window ).resize(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
});
});
</script>
Can anyone tell me in the simplest code possible, how to load and unload an html page into a div named "myDiv", with a simple click?
When i press another button on my navigation menu, i will then unload "myDiv" and replace with another page.
Whats the setup for this?
edit
I have 3 pages (page1.html, page2.html, page3.html)
My navigation is as follows:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
I am trying to load those pages into "myDiv", each page replacing the previous loaded page everytime i click a different page button. Thats all.
I hope i made what im trying to do clear as crystal and hopefully not leaving anything important out.
Assuming you can use javascript/jQuery (you don't give a lot of info on your environment)...
Have a look at the jQuery load() method.
http://api.jquery.com/load/
<div id="myDiv"></div>
<button id="myButton">Click Me</button>
<script type="text/javascript">
$( document ).ready( function() {
$( '#myButton' ).click( function() {
$( '#myDiv' ).load( 'test.html' );
});
});
</script>
That should do your load. I'll leave the rest to you :)
EDIT:
OK, something more along the lines of what you're looking for...
Assuming you can modify the markup and add a class attribute to your a elements...
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#myDiv' ).load( $( this ).attr( 'href' ) );
});
});
</script>
So any 'a' element with the class of dynamicLoad will trigger this when clicked. We don't want the browser to try and follow the link, so we use preventDefault() and stopPropagation(). The only other difference is that we're not statically loading "test.html". We're determining what html page to load by using jQuery's $( this ), which represents the element that triggered the function. Use the attr() method, which returns the value of a specific attribute of the element. In this case, the href attribute.
Questions?