I need some css and syntax help,please. Your help is warmly welcome.
I want to insert a list containing some skypelinks and behaving like a sidebar menu when I move the mouse over the image.
This is the html-code I tried to manipulate:
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename">
</a>
By moving the mouse over the image and the images title is skypename the two links should fade out to the right(float:right;?)
$("img[title$=\"skypename\"]").mouseover(function(){
$("<ul><li>Call</li><li>Chat</li></ul></li></ul>");
});
My aim is to let the html-code look like:
<ul>
<li>
<a href="?USER=name">
<img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
</a>
<ul>
<li>Call</li>
<li>Chat</li>
</ul>
</li>
</ul>
I created a fiddle http://jsfiddle.net/erhDJ/2/ where I tried sth. to work like a flyout menu.
In my case the first code I mentioned above would be replacing Klick me!.
By moving the mouse over it the two links should fade out to the right.
My questions:
How can I surround the first code with the second so that it looks like the third code snippet?
Do you see an easier option to create such a flyout menu?
Thank you.
I'm not too sure about what you actually want, but I can give you an example of animating menu's with some CSS and jQuery.
Sliding, animated menu when hovering link
Is this useful?
Related
<div class="hamburger">
hamburger
</div>
Hey guys I'm trying to create a hamburger menu like the menu in this link that I provided. i have nothing only html. And I don't know hoe create this? You guys can help me I think. Did you find anything like this? Or can you tell me how to do this?
https://www.hugeinc.com/us
Basically, you'll have 2 elements there - the button ('H' on the link you provided), and the navigation - list of links, that is hidden by default. Clicking on the 'H' button would show the navigation menu (and change text from H to Huge, or whatever you want).
<style>
.hidden {
display:none;
}
</style>
<div class="hamburger">
H
</div>
<div class="navigation hidden">
Link 1
Link 2
Link 3
</div>
<script>
$('.hamburger').click(function(){
$('.navigation').toggleClass('hidden');
$(this).text()==='H'?$(this).text('Huge'):$(this).text('H');
});
</script>
That's the basic idea how it would work. You can adjust it to your needs and style it how you want it to look.
(I haven't tested it, so it may contain some syntax errors - but the idea stands).
I am working on a wordpress page and i want to set a fixed image and 3 different texts at the the bottom of it.
What I want to do is that when the mouse hover on Text1 the top image changes, when the mouse hover Text2 the top images changes again.
Example: http://fr.muaythaitv.com/pages/helpcenter/advertise.php
I searched on internet but couldn't really find what I'm looking for, hope someone can help me!
You mean something like this ?
HTML markup.
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
jQuery :
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href'));
});
Css at your will ..
See Here again - it´s the second example is a live link, the third is anchor disabled link.
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.
We have been struggling over the last few days to create an image slider.
Basically, all we want is a list of images, for example:
<ul id="images">
<li id="1">http://www.site.com/image1.jpg</li>
<li id="2">http://www.site.com/image2.jpg</li>
<li id="3">http://www.site.com/image3.jpg</li>
<li id="4">http://www.site.com/image4.jpg</li>
<li id="5">http://www.site.com/image5.jpg</li>
</ul>
<div id="imageshow"> photo X of TOTAL </div>
<a id="prev">previous</a>
<a id="next">next</a>
So basically the contents of the UL are an array of the images, the imageshow div will be the content area where the currently selected image will show and the prev and next links scroll through the images.
We want only one image to be selected at a time, and the image can be changed with the prev and next links.
We have found scripts similar to this on the internet, but they come with other features which we do not need and they just bog down the page. We also need this script to work more than once on a page, as this page will contain 2, 3, 4 or even more of this feature, so this image scroller will need to work for each one, if you get what I mean.
How can we go about doing this? So we can emulate something which looks like the image below:
http://i53.tinypic.com/21b18pe.jpg
Thanks :)
Check out: http://www.no-margin-for-errors.com/projects/prettyGallery/
what about something like this (untested):
<script>
var imageArray=Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg");
var spot=0;
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;
function nextpic(){
spot++;
if((spot+1)==imageArray.length){spot=0;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;
}
function prepic(){
spot--;
if((spot<0){spot=imageArray.length;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length";
}
</script>
<div id="imageshow"></div>
<a id="prev" onclick="prepic()">previous</a>
<a id="next" onclick="nextpic()">next</a>