I want the online icon to blink. Put this in my js code:
function blink(){
$('ul.left_menu li.online').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blink);
}
What happens is that the whole link is blinking. Is there any way to access a specific property in jquery?
My css:
ul.left_menu li.online a{
width:166px;
height:25px;
display:block;
background:url(../images/online-status.png) no-repeat left #dad0d0;
background-position:5px 5px;
border-bottom:1px #FFFFFF solid;
}
I think you want to blink only the icon and not the whole link. But your JavaScript will blink the whole link because JS is assigned to your link container and you set the icon using css background. You can get rid of this using <img> tag. Use <img> to display the icon near your link, and give it a class. Assign blink to this class using jQuery.
Related
I'm working on a site here:
http://www.jasnasyogaonline.com/membership-test.php
And if you hover over the right nav, you'll see a fade in effect that happens where the background animates to the top and bottom from the middle of the link. In between the three colored lines (the border of the right nav) you'll see that there is white color. This is because on the other pages of the site, the background is white and the original programmer just used a background image to create the 'diagonal' edge of the nav item. Now that there is a full page video/image, this doesn't work because the background isn't white and the effect is lost.
My client is now looking to just have it be transparent between the razor lines but keep the nav items with the diagonal edges. If I removed the images on the end of the nav item, they just become straight rectangles. I've tried some CSS with borders/border-widths, etc. but it's a little tricky because if you look at the source code, the background is being generated by a PHP file that's using imagecreatetruecolor to create the hover effect.
Any ideas on how to cut the corner off of the right nav while keep the area between the razor lines transparent? I'm beginning to run out of ideas. Thanks for your help!
My suggestion would be to drop the hover edge div all together
.nav ul li div {
The recode the animation using a background sprite / animation. In reality I don't really like the mouse over effect at all. Maybe you could sell the customer on something that is easier to do like a text outer glow or an underlining effect.
Also: this post doesn't have anything to do with PHP
EDIT I can't think of another way this can be achieved but you can try if you want this design.
.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}
how can i add an id to a image tag using php or jquery if the image source is equal to something specific in url form?
i am very new to php and jquery and i come across and interesting problem i have a website called lingeriesshop.net and im trying to add live chat to the site but the custom live chat image i have selected in my chat plugins console is appearing with 50px of space between the image and the side of my page. the code is being generated from serverside scripts running through the chat service so i cannot add or remove css classes or id's in a traditional way in order to adjust the image position. i was suggested a solution to use jquery to add a class to the image using this jquery code to add css to the class to move the image 50px
$("#imageID").addClass("classname");
but the image code i am trying to add a class to does not have an inline #id and im not to familiar with image id's in wordpress in general here is the image code i get from firebug.
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
is it possible to write an if statement to where if the image tags src is equal to a set value then add an id to the image tag to later reference the id and add a class to adjust its position? im not a php experienced person so im not sure if this is possible or how to go about it im just trying to move my image over 50px
$('img[src="image.jpg"]').addClass('classname');
or
$('img[src*="image.jpg"]').addClass('classname'); // this will find every image src containing "image.jpg"
If your img is wrapped in a div or other element, you can reference it in your CSS without a class.
If the html is something like this...
<div id='chatwindow'>
<div id='conversation'>
...
</div>
<div id='userinput'>
<input type="text" />
</div>
<img style="white-space: nowrap; position: absolute; top: 0px; left: 0px;" src="http://lingeriesshop.net/redchatimage.png">
</div>
Then you can use CSS to move the img 50px to the right...
#chatwindow img {margin-left: -10px !important;}
You can edit an element's attribute directly using attr. You can use this to give the image an ID which you can later use to refer to.
$('img[src="image.jpg"]').attr('id','yourIDHere');
$('yourIDHere').addClass('classname');
You can access image using it's source , and add attribute and a class like this :
$('img[src="image_path"]').attr('id','sampleID').addClass('classname');
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
Hello everyBody
I've created a slideShow (with left and right arrows) , displaying images in three set, images are aligned horizontally, and every image is contained in a li element with a link (headline) as follows:
<li><image src="image_n.jpg"></image>Google search engine</li>
ok my question is , how can I put the headerline ("a" tag) so it covers the bottom of the image using css.
thank you
I'd use a combination of display: block and either a negative top margin or position: relative and a negative top.
li a /* or a unique identifier if it's just this instance */
{
display: block;
margin-top: -1.1 em;
}
or
li a
{
display: block;
position: relative;
top: -1.1em;
}
I'm using em as a unit because 1em is equal to the font size. This means that margin-top: -1.1em will be (approximately) a little bit more than the height of one line of text.
Instead of using an image tag, I would suggest using the background-image CSS property on the list. That way, the text will just flow over the image naturally.
You have one of two options:
Wrap the Image tag with the anchor tag like so:
<li><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></li>
Remove the image tag and define the image in the background:
<li><image src=""></image>Google search engine</li>
I prefer the latter of the two.
I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.
Below is an image showing the different actions it does when clicked on.
I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?
Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Once you've done that, you can use CSS to position the tooltip and show it when necessary.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone's hovering over the button. */
display: block;
}
To show the drop-down box, you probably will need JavaScript. Add another element to the container:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:
$('#button').click(function() {
$('#selection').show();
});
You can then make your sub-items do whatever they like, as long as they also hide #selection.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Finally, you want to change the background and text colours upon hover. That's easy enough:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.
Here is the approach I would take:
For hovering check out jQuery's hover event to change the different image states
For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
For clicking, jQuery's click event will do the trick
The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.