<div class = "divwhole">
<div class="divfixed">
</div>
<div class="divscoll">
</div>
</div>
CSS
.divfixed{
position:fixed;
}
I try position: fixed using radwindow.It work in computer browser but no work in I Pad. How to solve it?
What does RadWindow have to do with this? I don't see it around. Check you code for typos or other issues (like another CSS rule with higher specificity being present).
If you want to have a RadWindow fixed on the screen - use its Pin behavior. its client-side API is useful - the isPinned() and togglePin() methods to be more precise.
Related
I have a SharePoint 2010 site and would like to use CSS only in the wikipage.
On my page I have a paragraph of information and at the end of it, has a question. After the viewers read the information and the question I would like them to be able to click on an image that says 'answer'. When clicking on the 'answer' image a text box comes up under the question with the answer. I would like the answer to stay on the page, not just hovering over the image.
My preference is to do this solely in css. I don't think I have the capabilities to do it in javascript.
I'm open to both options, I guess. If it is javascript can it be done inline?
Like mentioned by #JofryHS, css doesn't really respond to clicks.
Using inline js click handlers isn't great as it'll leave you having to repeat yourself a lot, but from the sounds of things you're fighting against not having enough access to Sharepoint (sigh, corporate networks).
This uses an inline click handler to show the answer:
<div class="question" id="q1">
What colour is the sky?
<button class="answerButton" onClick="document.getElementById('q1Answer').style.display='block'">Answer</button>
<div class="answer" id="q1Answer">
Overcast and grey, because I live in the UK.
</div>
</div>
<div class="question" id="q2">
Why does it always rain on me?
<button class="answerButton" onClick="document.getElementById('q2Answer').style.display='block'">Answer</button>
<div class="answer" id="q2Answer">
I'd have thought you figured this out already... It's Britain, of course it always rains on you!
</div>
</div>
the answers are hidden using css (note the display:none inside the .answer block):
.answer {
display:none;
background-color:#e5e5ff;
padding:15px;
}
.question {
background-color:#f5f5f5;
padding:15px;
border-radius:5px;
margin:7px;
}
Essentially, all the onClick does is change the css of the answer from display:none to display:block, rendering the answer visible.
There's also a tad of css to make it look shinier, and here's a demo jsfiddle
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!
I pasted this code into my header.php file to get an opt-in button:
<div class="createsend-button" style="height:27px;display:inline-block;"data-listid="r/72/191/0E3/389738A3FFEDFFA8">
</div>
<script type="text/javascript">....</script>
I can't seem to control the placement - if I add .createsend-button to css there's no effect. When I look at this in Firebug it says this div class is actually .subscribe-button-inner but customizing that class in css has no effect either.
What am I missing here?
My site is at : http://tinyurl.com/c5eujcj
The iframe for the createsend button has inline CSS including position: absolute. If createsend offers an option to change the button, that would be your best option. If not, use this:
<div class="applyStylesToThis">
<div class="createsend-button" style="height:27px;display:inline-block;" data-listid="r/72/191/0E3/389738A3FFEDFFA8"></div>
</div>
I have a gallery plugin. If I click on another image, or in a arrow, a popup will appear.
The problem is that whem the popup is opened, the plugin gallery moves down on the page.
What is the css problem?
How can I fix it?
here my plugin:
http://judopassion.com/wordpress/?p=274
Thanks a lot.
There's quite a lot going on here, so I'll try and simplify the steps you need to take.
<div id="box">...
Needs to be a child of
<div id="gallery-1">....
So you would have:
<div id="gallery-1">
<div id="box"></div>
</div>
Add position:relative; to gallery-1.
Your #box styles are really, really messy. You need to delete left: and top: instructions from the CSS for #box.
I have added top property on pop-up appearing, and removed it when is closed:
$("gallery-1").css("top","-xxem");
I can't use GeorgeBuckingham solutions, because the plugin don't not allow it. Thanks anyway.
This is the code
HTML
<div id="footmain">
<div id="col1" class="mark"></div>
<div id="col2" class="mark"></div>
<div id="col3" class="mark"></div>
<div id="col4" class="mark"></div>
</div>
see an example here with the CSS that I have:
http://jsfiddle.net/EtBKx/8/
I need to drop it down with transition, starting slowly, going fast, finish slowly.
jQuery is the last way, cause I want to be without JavaScript and for multiple browsers and CPU speeds.
To be compatible with tablets and smartphones, is better to have a trigger in the bottom right of each tab, with the both functions of hover and clicked?, or a <"a">Direction<"/a"> link that can be clicked once to drop and one more to go to the direction?
I modified your fiddle a bit:
http://jsfiddle.net/EtBKx/17/
basically all I added was
*vendorprefix*-transition: height ease 1s;
"ease" defines an animation that starts slow, becomes fast and ends slow.
Oh and you had .mark :hover (with a space), which didn't work, .mark:hover is what you'll want.
More about transitions:
http://www.w3schools.com/css3/css3_transitions.asp
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
jQuery solution (it doesn't slow your application):
http://jsfiddle.net/EtBKx/16/
I wrote just the core syntax, now you can replace the .css with .animate and add all the effects you need.
CSS3 solution (not compatible with all browsers)
http://jsfiddle.net/EtBKx/22/
EDIT:
You can refer at this link