I am trying to change the CSS on specific elements inside the page (since I need them to be different on specific pages) Trying to do this to no avail.
<script>
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
$(document).find('.screen-nav li a').css({
'color': '#fff'
});
$(document).find('.screen-nav li a:after').css({
'background-color': '#fff'
});
</script>
However you are trying to find the html element from document which runs before DOM is ready. Therefore you need to bind you find function after DOM is ready and jquery script should be with in document.ready function and try to change css property from jQuery like this:
HTML
<nav class="screen-nav">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</nav>
JQUERY
$(document).ready(function(){
$('.screen-nav li a').css({
"background-color": "yellow",
"font-size": "200%",
"color":"#000"
});
});
Working demo here
Its better to execute these CSS changes after the document has completed loading.
$(document).ready(function(){
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
});
You can also reduce the code above to simply query the objects from the class. Since your parent object is the document, you can directly use JQuery selectors on the CSS classes
$(document).ready(function(){
$('#nav-icon span').css({
'background-color': '#333'
});
});
Related
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>
How to access an external element inside a polymerjs element.
<polymer-element attributes="externalDropZoneContainerId">>
<script>
Polymer('file-upload', {
ready: function(){
//Here I want to access the externalDropZoneContainerId so that I can bind drag and drop functionality to this ID
//$('#' + externalDropZoneContainerId) does not work.
}
})
</script>
<polymer-element>
The attribute is accessible via this.externalDropZoneContainerId, the standard DOM API to get elements is document.getElementById:
<polymer-element attributes="externalDropZoneContainerId">>
<script>
Polymer('file-upload', {
ready: function(){
var elem = document.getElementById(this.externalDropZoneContainerId);
}
})
</script>
<polymer-element>
Instead of the ready event you should maybe use the domReady event instead, otherwise the other element may not yet be guaranteed to exist.
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>
I am following this tutorial: https://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/
I made the loader as a gif but when I click on a link the loader is not working. I used the second part of loader where it can be added to a link.
Here is a link to the jsfiddle containing a part of my code: http://jsfiddle.net/rohitbegani/DcV8C/
$(document).ready(function(){
$('#button-upload').click(function() {
$('#spinner').show();
});
});
Main javascript used for getting on-click animation.
Can't actually load the gif file on fiddle as I don't know how to add external images/gif to a jsfiddle code(if it is at all possible)
You need to remove the # and replace with a period as it's a class for the button-upload.
$(document).ready(function(){
$('.button-upload').click(function() {
$('#spinner').show();
});
});
http://jsfiddle.net/DcV8C/2/
updated your fiddle, the 'button-upload' is a class not an ID so
$(document).ready(function(){
$('.button-upload').click(function() {
$('#spinner').show();
});
});
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?