I have a simple div with bunch of list items that I need to set their background with javascript? any help would be highly appreciate it, let say I have url1, url2, url3, url4?
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/subway.jpg');">
<div class="inner">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a> </div>
</li>
<li style="background-image: url('img/shop.jpg');">
<div class="inner">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
</ul>
</div>
My suggestion here would be to create separate CSS classes for each of the background image styles you want. Then you can use a library like jQuery to addClass to any HTML element. Here's the jQuery documentation: addClass
Ideally, you want to avoid convoluting your CSS with JavaScript code and as much as possible, keep these two separate from each other.
Related
I have a menu that becomes a dropdown when it is in mobile, and floats right when it is desktop, therefore all my divs are reversed in order since float right wouldn't work otherwise
<div class="menu active">
<div class="dropdown-content">
<div class="menu-item whitelist">
Join Whitelist
</div>
<div class="menu-item">
FAQ
</div>
<div class="menu-item">
Team
</div>
<div class="menu-item">
Token
</div>
<div class="menu-item">
About
</div>
</div>
<div class="dropdown-btn">
<a class="dropdown" href="javascript:void(0)">☰</a>
</div>
</div>
my question is how can I make then "float" downwards in my dropdown menu so they are in the right order? Or is it better to change how they act when it's in desktop mode?
You probably want them in the correct order to begin with, then use display:inline-block to make them all go on a single line for desktop.
Hard to tell without seeing any css or design, but that sounds reasonable.
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
I need a navigation menu for a page I'm making and I would like to change the active link when someone clicks on it. I already have styles on the active link but I dont know how to make it change. Having it change when someone hovers over it would also be great. Javascript is alright. Thank you.
Menu
<div class="row">
<div class="small-12 medium-12 large-3 columns">
<a class="logo" href="/">Saul Designs</a>
</div>
<div class="large-7 columns">
<nav class="main-nav show-for-large-up">
<ul>
<!-- below this is what i need to have change-->
<li><a class="active" href="#start">START</a></li>
<li>ABOUT</li>
<li><a href="#work" >WORK</a></li>
<li>CONTACT</li>
<!-- and above this -->
</ul>
</nav>
</div>
<div class="large-2 columns">
<div class="normal-button alternate show-for-large-up">
HIRE ME
</div>
</div>
</div>
You can use the anchor for styling stuff in css3. The Problem here is that you have to specify matching ids to every anchor you have.
So you have to write:
<li><a id="start" href="#start">START</a></li>
<li><a id="about" href="#about">ABOUT</a></li>
<li><a id="work" href="#work" >WORK</a></li>
<li><a id="contact" href="#contact">CONTACT</a></li>
Then you have to add 4 stylerules, too:
#start:target, #about:target, #work:target, #contact:target{
background:#555; /* or as you want... */
}
This way it should work without any additional javascript.
I don't like this way because you have to specify every id and you are polluting the css-space. But I don't know another way using only html and css.
I try make a transition fade page with div content, this is my horizontal header menu
<ul id="navigation" class="select">
<div id="teste">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="about" href="#about">about</a></li>
<li><a id="contact" href="#contact">contact</a></li>
</div>
and this is the example of content
<div id="home">
<h2>this is home</h2>
</div>
<div id="about">
<h2>this is about</h2>
</div>
<div id="contact">
<h2>this is contact</h2>
</div>
I need that #home is showing the homepage, and other hidden, when you click on the link to use the fade effect to the next page (which is the case in div) .
what is the best way? css3 or jquery? or both? Can someone help me make this script?
If I understand your question correctly, you want the navigation to fade in the new content rather than linking to a different page. In that case, either CSS3 or jQuery could work, but I would recommend jQuery because it is browser backwards compatible. Anything older that IE 9 will not interpret the CSS3 transitions. Plus, there is not a good way to detect clicks in CSS3 (see this question), so you'd end up using jQuery there anyway. Here is the code:
Menu:
<ul id="navigation" class="select">
<div id="test">
<li><a id="link-home" href="#">Home</a></li>
<li><a id="link-about" href="#">about</a></li>
<li><a id="link-contact" href="#">contact</a></li>
</div>
</ul>
Content:
<div id="home">
<h2>This is home.</h2>
</div>
<div id="about">
<h2>This is about.</h2>
</div>
<div id="contact">
<h2>This is contact.</h2>
</div>
jQuery:
$(document).ready(function () {
var animTime = 600;
$("#about").hide();
$("#contact").hide();
$('#link-home').click(function() {
$("#about").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#home").delay(animTime).fadeIn(animTime);
});
$('#link-about').click(function() {
$("#home").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#about").delay(animTime).fadeIn(animTime);
});
$('#link-contact').click(function() {
$("#home").fadeOut(animTime);
$("#about").fadeOut(animTime);
$("#contact").delay(animTime).fadeIn(animTime);
});
});
This should work with any code you already have. Just make sure your ids in the markup match the ids in the jQuery and you will be good to go. If you want to adjust the fade in time, just change the value of animTime. This number measures the animation time in milliseconds. The actual time the animation takes will be double the animTime because the other div's are animated out and then the new one is animated in.
I've looked around and unfortunately, haven't found anything that quite matches what I'm hoping to achieve. I have two things going on. First an image/content slider which I'm using Awkward Showcase for. Then within each slide I need to build a mousein/mouseout effect that swaps and hides an image when the user hovers over the text option. My JS looks like this:
$("#news-2, #news-3, #news-4, #news-5, #news-6").hide();
$("#newsitem-1, #newsitem-2, #newsitem-3, #newsitem-4, #newsitem-5, #newsitem-6").mouseover(function(){
$(this).css('cursor', 'pointer');
if($("#newsitem").val() != $(this).attr('id').replace('newsitem', 'news')){
$("#news-1").hide();
$("#news-2").hide();
$("#news-3").hide();
$("#news-4").hide();
$("#news-5").hide();
$("#news-6").hide();
$("#newsitem").val($(this).attr('id').replace('newsitem', 'news'));
var vid = $(this).attr('id').replace('newsitem', 'news');
$("#" + vid).show();
}
});
My html looks like this:
<div id="showcase" class="showcase">
<div class="showcase-slide cs-1">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-1"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-2" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-3" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 1</h2>
<ul>
<li id="newsitem-1">Hover Change Image 1</li>
<li id="newsitem-2">Hover Change Image 2</li>
<li id="newsitem-3">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Caption Title</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<div class="showcase-slide cs-2">
<div class="showcase-content">
<div class="cs-container">
<div class="thumbs">
<div id="news-4"><img src="http://placehold.it/640x360/eeeeee/cccccc" border="0"></div>
<div id="news-5" style="display: none;"><img src="http://placehold.it/640x360/dddddd/dddddd" border="0"></div>
<div id="news-6" style="display: none;"><img src="http://placehold.it/640x360/cccccc/aaaaaa" border="0"></div>
</div>
<div class="cs-links">
<h2>Link Title 2</h2>
<ul>
<li id="newsitem-4">Hover Change Image 1</li>
<li id="newsitem-5">Hover Change Image 2</li>
<li id="newsitem-6">Hover Change Image 3</li>
</ul>
</div>
</div>
</div>
<div class="showcase-thumbnail">
<div class="showcase-thumbnail-caption">Restaurant TV</div>
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
</div>
Any suggestions would be hugely appreciated. One thing to note is the code I've written only works once, once you engage the slide function the hover effect breaks unless you hard refresh.
Edit: Question is, how can I make this more efficient. I have multiple items (image and text). And any ideas why this breaks once the slide function is engaged?
I used ID's because it's a one to one relationship between the text and the associated image.
Edit 2: If I swap the order of my js, the function breaks. Here is a JSFiddle as long as I keep this order everything works until I engage the slider.
http://jsfiddle.net/mV3dJ/
I've not really seen a function done like this before but one thing that stands out to me as a potential breaker is this
var vid = $(this).attr('id').replace('newsitem', 'news');
If you're replacing an ID of something which listen to an event, then the event can only occur once on that element (as the next time it has a different name and so won't recognise it.
Ideally you want to use a web debugger like firebug or Chrome developer tools, set breakpoints and figure out from stepping through the code why it isn't working correctly.