I have a link at the bottom of my page with
<a href="javascript:scroll(0,0)">
Online Marketing
</a>
To scroll to top of page but it makes the text blue and underlined how do i add some code to remove text deceration to it?
i tried a href="javascript:scroll(0,0)" style="text-decoration: none; color:#FFFFFF;">
but then the scroll to top stopped working does anyone now any way to get round this to remove the text deceration using code on the specific element?
Your code looks right...which is odd. Perhaps try assigning the scroll button to a CSS class.
In your style sheet add
a.StandardTextLink:link, a.StandardTextLink:active, a.StandardTextLink:visited {text-decoration:none;color:#FFF;}
Then in your html
Scroll to top
Hopefully that'll sort it.
C
You could try not using an element that has default styles:
<span onClick="scroll(0,0);" style="cursor: pointer;">Online Marketing</span>
Check spelling of your style-attribute, especially quotas. Expression should work.
Related
Im using the after property on my h2s to create border lines.
Im using the border lines on my home page and parent page but don't want them on my sub pages is there anyway to display none for this?
thanks
I am not sure what code you have written but to give you an idea, you can do the following:
<span class="border-line">Some text here</span>
Then in your CSS
.border-line {
display: none
}
it simply throw the styling in another style sheet and then link it to your homepage and parent page but not to your other pages it should solve the problem
The code I have now is the following:
<div id="bint">
<button id="ButtonA">
Option A
</button>
<button id="ButtonB">
Option B
</button>
</div>
This code won't align the buttons unless I remove the div tag.
What is the easiest way to put them in line?
By default the buttons are align in inline-block, so they will appear horizontally.
If you want to present them vertically you sould set a css rule to diplay: block.
You can see more information in the follow link:
Which display mode do HTML buttons have?
I would check out CSS Flexbox, take a look at this Flexbox generator to help you understand it better.
Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>