I have two divs, one inside the other, and i want block the inside div (div2) for guest users, so they can't interactuate with that div, I want they only can see the image that generates the javascript.
This is the code:
<DIV id="div1" style="overflow:hidden; position:fixed; top:80px; left:0px; height:52; width:177; " onClick="location.href='login.php'">
<div id="div2">
<script type="text/javascript" src="/chat/livehelp_js.php?eo=1&relative=Y&department=1&serversession=0&pingtimes=60&filter=Y&"></script>
</div>
</DIV>
I tried with z-index and it don't works
What can i do for lock the div2? Thanks
Try to make another transparent div over the one, you need to block.
Try this: Create a Modal Dialog
Just make overlay div visible, if not logged in, and hidden, if logged in.
Bear in mind that if you 'block' div2 using css (or embedded style tags) they can be easily undone. A couple of clicks in FireBug and the div would be 'unblocked'. Also 'manually' issuing a request against the url would bypass any 'blocking'.
Would it not be better for the service at /chat/livehelp... or similar to return and empty div when the user is not logged in?
I'm not sure i could help you, but with plugins like jQuery-UI (or maybe Kendo-UI?) u can easily manage dialog forms
es. Dialog demo
otherwise i think u have to hack with some js + css + html tricks...
Related
I have to create a pop up that will be show when the user click on a link.
I think that I can not use Javascript because I have no access to the full template so I can't put the javascript into the <head></head> section of the page (I can't modify it)
Can I create a pure HTML pop up withous use Javascript or alternatively can I declare my Javascript into the <body></body> of my html code and not into the <head></head> section?
Tnx
Andrea
Yes, you can do this in pure html and css. The trick is to use the :target pseudo selector. Rules with :target will match when the url anchor matches a particular id. You can update the url anchor by creating a plain anchor link. This does have a slight jumping effect because we're using anchors, but it is possible.
So for example: http://jsfiddle.net/X49zJ/1/
Click to Trigger The Modal
<div id="modal"> I am a Hidden Modal</div>
And CSS:
#modal {
display: none;
width: 300px;
height: 100px;
border:1px solid #CCC;
background:#EEE;
}
#modal:target {
display: block;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/:target for more information on the :target and also this demo for a much prettier lightbox.
For more flexibility you can always add javascript. If your javascript is non-essential, it's generally best practice to put javascript at the bottom of the body, or add the script tag with the async attribute so it doesn't pause rendering of content when it loads.
You can do this with HTML and CSS, like so.
To answer your second question, generally it's possible to put Javascript in the <body> section of your page as well.
You cannot do this without javascript, however you can put script tags literally anywhere in your page and it should work, so try this.
<div>
<h1 id="test">New Content</h1>
<script>
var test = document.getElementById('test');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
</div>
It's permittable to use target="_blank" in the <a> tag if you're using HTML5, which will generally make the link open in a new tab in modern browsers. This is preferred by quite a lot of users so you may want to consider this.
Putting JavaScript into the body of the page should be perfectly fine if you have complete control over the HTML. It is put within simple <script> tags, after all — there's no need for it to be in the <head>.
If whatever CMS you're using filters out <script> tags but you still have control over HTML attributes, you might be able to get away with putting JavaScript in an onclick attribute:
Link
Here you can find a walk-through http://dsheiko.com/weblog/fancy-modal-windows-without-javascript/
It opens pop-up and blurs the modal underlay. Here how it looks codepen.io/dsheiko/pen/jCcld
It also describes how you can enhance it with such goodies as closing on Esc press and by clicking outside modal content and provides JavaScript fallback for IE8.
The code below works fine with ONE Reveal/Hide Text process
<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">
<div class="collapse" style="display:none;">Collapse Text</div>
However if this code is duplicated multiple times, the Collapse Text shows up and doesn't disappear and in fact conflicts with the Expand to reveal even more text instead of collapsing as it should.
In this http://jsfiddle.net/syEM3/4/ click on any of the Click Here to READ MORE...
Notice how the Collapse Text shows up at the bottom of the paragraphs and doesn't disappear. Click on the Collapse and it reveal more text.
How do I prevent this and getting to work as it should?
The two slideDown function calls are not specific to the .reveal and/or .collapse that you are currently doing. i.e.
$(".collapse").slideDown(100);
will find all the elements with the class .collapse on the page, and slide them down. irrespective of what element you just clicked.
I would change the slideDown call to be relavant to the element you just clicked i.e. something like this
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(this).next().next(".collapse").slideToggle(100);
});
in your code
$('.reveal').click(function() {
$(this).slideUp(100);
$(this).next().slideToggle();
$(".collapse").slideDown(100);
});
$('.collapse').click(function() {
$(this).slideUp(100);
$(this).prev().slideToggle();
$(".reveal").slideDown(100);
});
this two rows doesn’t do what you want as they act on all elements of the specified class
$(".reveal").slideDown(100);
$(".collapse").slideDown(100);
When you do $(".collapse").slideDown(100);, jQuery runs slideDown on everything with the .collapse class, not just the one that's related to your current this. To fix this, refer to the collapse based on its location to $(this).
Do do this, use something like $(this).siblings(".collapse").slideDown(100);
Note that this particular selector will only work if you enclose each text block in its own div. With each text element in its own div, like you have it now, .siblings(".collapse"), which selects all the siblings of $(this) with the collapse class, will still select both of the collapse elements.
Okay, I think you should take a different approach to your problem.
See, jQuery basically has two purposes:
Selecting one or more DOM elements from your HTML page
manipulate the selected elements in some way
This can be repeated multiple times, since jQuery functions are chainable (this means you can call function after function after function...).
If I understood your problem correctly, you are trying to build a list of blog posts and only display teasers of them.
After the user clicks the "read more" button, the complete article gets expanded.
Keep in mind: jQuery selects your elements very much like CSS would do. This makes it extremely easy to
come up with a query for certain elements, but you need to structure your HTML in a good way, like
you would do for formatting reasons.
So I suggest you should use this basic markup for each of your articles (heads up, HTML5 at work!):
<article class="article">
<section class="teaser">
Hey, I am a incredible teaser text! I just introduce you to the article.
</section>
<section class="full">
I am the articles body text. You should not see me initially.
</section>
</article>
You can replace the article and section elements with div elements if you like to.
And here is the CSS for this markup:
/* In case you want to display multiple articles underneath, separate them a bit */
.article{
margin-bottom: 50px;
}
/* we want the teaser to stand out a bit, so we format it bold */
.teaser{
font-weight: bold;
}
/* The article body should be a bit separated from the teaser */
.full{
padding-top: 10px;
}
/* This class is used to hide elements */
.hidden{
display: none;
}
The way we created the markup and CSS allows us to put multiple articles underneath.
Okay, you may have noticed: I completely omitted any "read more" or "collapse" buttons. This is done by intention.
If somebody visits the blog site with javascript disabled (maybe a search engine, or a old mobile which doesn't support JS or whatever),
the logic would be broken. Also, many text-snippets like "read more" and "collapse" are not relevant if they don't actually do anything and are not part of the article.
Initially, no article body is hidden, since we didn't apply the hidden css class anywhere. If we would
have embedded it in the HTML and someone really has no JavaScript, he would be unable to read anything.
Adding some jQuery magic
At the bottom of the page, we are embedding the jQuery library from the google CDN.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is a best practice and will normally speed up your page loading time. Since MANY websites are embedding
jQuery through this URL, chances are high that its already in the visitors browser cache and doesn't have
to be downloaded another time.
Notice that the http: at the beginning of the URL is omitted. This causes browsers to use the pages current protocol,
may it be http or https. If you would try and embed the jQuery lib via http protocol on a https website, some browsers will refuse to download the file from a unsecure connection.
After you included jQuery into the page, we are going to add our logic into a script tag. Normally we would
save the logic into a separate file (again caching and what not all), but this time a script block will do fine.
Finally some JavaScript
At first, we want to hide all elements with the css-class full, since only teasers should remain displayed. This is very easy with jQuery:
$('.full').hide();
The beginning of the script $('.full') tells jQuery: I need all elements with the CSS-class full. Then we call a function on that result, namingly hide() which purpose should be clear.
Okay, in the next step, we want to add some "read more" buttons, next to every teaser. Thats an easy task, too:
$('.teaser').after('<button class="more">Read more</button>');
We now select every element with the css-class teaser and append some HTML code after() each element - a button with the css-class more.
In the next step, we tell jQuery to observe clicks on every one of this freshly created buttons. When a user has clicked, we want to expand the next element with the css-class full after the clicked button.
$('.more').on('click', function(){
//"this" is a reference to the button element!
$(this).slideUp().next('.full').slideDown();
});
Phew, what did we do here?
First, we told jQuery that we wanted to manipulate this, which is a reference to the clicked button. Then we told
jQuery to hide that button (since its not needed anymore) slowly with slideUp().
We immediately continued telling jQuery what to do: Now take the next() element (with the css-class full) and make it visible by sliding it down with slideDown().
Thats the power of jQuerys chaining!
Hiding again
But wait, you wanted to be able to collapse the articles again! So we need a "collapse" button, too and
some more JavaScript:
$('.full').append('<button class="collapse">Collapse text</button>');
Note: we didn't use the after() function to add this button, but the append() function to place the button
INSIDE every element with the css-class full, rather than next to it. This is because we want the
collapse buttons to be hidden with the full texts, too.
Now we need to have some action when the user clicks one of those buttons, too:
$('.collapse').on('click', function(){
$(this).parent().slideUp().prev('.more').slideDown();
});
Now, this was easy: We start with the button element, move the focus to its parent() (which is the element that contains the full text) and tell jQuery to hide that element by sliding it up with slideUp().
Then we move the focus from the full-text container to its previous element with the css-class more, which is its expanding button that has been hidden when expanding the text. We slowly show that button again by calling slideDown().
Thats it :)
I've uploaded my example on jsBin.
I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!
You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?
<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}
Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.
There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/
This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs
Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).
I am using, thickbox in Joomla, have included jquery and thickbox files, and when I use iframe or ajax then every thing shows fine while if I try to show inline content in thickbox, it doesnot show any thing. Following is my code:
Show hidden modal content.
<div style="display:none" id="hiddenModalContent">This is the div that I want to show</div>
So where the problem is? I am using it in Joomla. It shows popup but nothing inside it, and it is really strange that this is not working in my code while working on thick box demo with same code, so please tell whatever you know.
thanks
This will work for you;
you have to warp content into another HTML element within the hiddin div:
Show hidden modal content.
<div style="display:none" id="hiddenModalContent">
<div>This is the div that I want to show</div>
</div>
did you try wrapping your content ("This is the div that I want to show") inside a blank div?
eg:
<div style="display:none" id="hiddenModalContent"><div>This is the div that I want to show</div></div>
What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?
It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.
You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});