I am adding a shout-box to my page using JavaScript <script></script> tags, and I really cannot figure out how to add style to it. The shout-box also goes behind the everything. Here is my website: link
The following is the shout-box I want to add it:
<script type="text/javascript" src="http://www4.yourshoutbox.com/shoutbox/start.php?key=521659178"></script>
I suggest to put your <script></script> inside the div and then apply the style for it. The z-index will help you to bring the content in front of others.
<div id="myshoutbox">
<script></script>
</div>
And the CSS:
#myshoutbox {
z-index:9999;
}
You can apply other styles you require.
Related
I am looking for a solution without javascript, where I can use an link like this:
<a href='#link1 +60px'>
This is just an example for easier understanding. So what I am trying is, that I got an anchor in my website, and the link goes to that specific point + 60px further.
So far the following is the best method I could find to position the landing position w/o javascript
HTML (add an additional anchor tag)
<!-- Actual going to here -->
<a id="anchorpoint" class="anchor"></a>
<!-- Display point -->
<div>Some content here</div>
CSS
.anchor {
display:block;
padding-top:60px;
margin-top:-60px;
}
It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container.
Try: https://jsfiddle.net/q6yvuhao/
This is impossible.
Your only options are JavaScript and linking explicitly to a spot (with its own ID) above where you want to link to.
Is the anchor point invisible? If so, add a class to the link and the following CSS:
a.link {
position:relative;
top:60px;
}
<a class="link" href='#link1'>
I am using this link to have a side bar that I can hide or display. How can I add a bar to the right side of the div, that I can click to trigger the hide/show?
So far I found I can do a border-right: 5px solid black in css to make a basic one.. But I actually have no clue how to make it clickable.. I'm sure there might be a name for what I want to add, but I have no clue what it is.
Any help would be appreciated.
EDIT:
Got it working with that jsfiddle. But then I messed with it to try and move it to the main content div so on hover it can expand out to the right, and also not hide after hiding side panel(which could be fixed with the css for the panel toggle) Here is my modified jsfiddle, but I can't seem to click it for some reason.
edited the fiddle to something closer to what I think you needed:
http://jsfiddle.net/y7L2qvy6/18/
**My apologies.
You're trying to add something like this then, right?
http://jsfiddle.net/y7L2qvy6/3/
**
The opening and closing of the navigation div is achieved with:
<!--put whatever text or image you like here-->
and requires that you are including jquery, bootstrap, and the following script:
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Keep in mind that you must instruct the browser to load jquery before trying to run the script, like in the example above.
Finally, also make sure that all page content is inside of a div with an id of "page-content-wrapper", and that div must be inside of a div named "wrapper".
like so:
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<!-- Navigation Content Here -->
</div>
<div id="page-content-wrapper">
<!-- Page Content Here -->
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
I have an html page and i want tou include inside it another html page wich have lots of links. I was able to make it happen with an iframe, but i want the page inside the iframe to have the same color properties for the text and the links as the original page and i don't want a scrollbar, i just want to fully show the links page (around 700 lines of links), there is a limitation and i can only see 38 lines of links without scrollbar.
Is there any way to do it without iframe? or can i adjust anything else to the iframe?
Look at jQuery .load() to load a div with that requested HTML.
<style>
div.frame{
width:50%;
height:50%;
border:solid #000 1px;
}
</style>
<div class="frame"></div>
<script type="text/javascript">
$('document').ready(function(){
$('div.frame').load('/links/links1.html');
});
</script>
just link a jquery library to make it work:) hope this helps..
This should be really easy for you guys but I'm a real beginner on this & need it explained simply to me. I reckon it'll also help a lot of others like me out there who are just starting out on jquery...
I'm building a site that needs to have a button on one of its pages which when clicked not only hides a div of content (for which there are loads of solutions out there) but at the same time shows a previously hidden div of content.
I need to know the jquery which'll do this & what I need to wrap around the button to set off the jquery.
Can you help me out?
Thanks,
Stu.
If you are only concerned with two div elements, jQuery.toggle() supports two event handler functions:
$('button').toggle(function(){
$('div1').hide();
$('div2').show();
},function(){
$('div1').show();
$('div2').hide();
});
This should work just make sure that one div has a css property display:none and the other div does not (is visible.)
Inside ajax call on success you have to wirte which div you have to hide and which div you have to show.
$.ajax({
url: "Sevlet",
type: 'POST',
dataType: "json",
data:{"id":id},
contentType:"application/x-www-form-urlencoded",
success: function (data) {
$("#div1").hide();
$("#div2").show();
}
});
Firstly, jQuery is just a library of functions to do stuff.
So inbulit functions like hide() and show() can be used to do what you desire.I believe the documentation on jQuery for hide/show/hide_show on the links below are quite simple to understand and you should have little to no problem. http://api.jquery.com/hide/ http://api.jquery.com/show/
http://www.w3schools.com/jquery/jquery_hide_show.asp
However, another way to approach the problem is to use the jQuery methods to toggle CSS properties which will cause the div elements to be shown or hidden based on css properties. I will demonstrate it for the height property, but several other's could also be used including max-height, left, right, top, bottom etc.
Altering the properties in CSS, I can see how the Div is visible or hidden
Example:
<html>
<head>
<style>
.Div_I_Want_To_Show{
background: #ffe400;
width:100%;
height:0px;
overflow:auto;
}
</style>
</head>
<body>
<div class="Div_I_Want_To_Show">
<p>Some Random Text Here</p>
</div>
<button class="btn">Click to See Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(".btn").click(function(){
$('.Div_I_Want_To_Show').css('height','20em')
});
</script>
</body>
</html>
The fiddle link : https://jsfiddle.net/L7pmarzh/
And in case you wanted to know, you can animate it as well, which I guess you would want to any website, since a simple hide and show effect is not appealing to any user.
Hope this solves your problem :)
This is hard to sum up in a title, so forgive me.
Basically, here is what I have:
a img {
/ * style * /
}
However, I want to affect the a tag in this instance. Is there any way to do so in CSS without resorting to JavaScript wizardry?
Unfortunately the cascading in CSS only goes one way. From your example, I'm guessing you are trying to do something like this:
<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
<a>Hello</a> <!-- This A is normal -->
Most developers would accomplish it by simply adding a class.
<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
Even better, use that class to make the icon a background image and add padding.
<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>
<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>
Put all your icon images into classes too and you have some pretty clean HTML!
You want to apply styles to the tag only if it has an image correct? In short, using straight CSS there is no way to do that.
EDIT
BUT, if you wanted to do this w/ jquery you could do it like so:
$('a').has('img').addClass('hasImg');
then use .hasImg as your hook
a.hasImg{background:lime;display:block;height:200px;width:200px;}
Here's a demo on JSBin I put together (view source): http://jsbin.com/owafi4
CSS selectors can not ascend. It is a limitation of the language.