I've been searching for examples of custom on mouse right click menus but i would like to emulate the same options you get when you right click in chrome on a web page Maintaining cut, copy, and paste but also (here is the tricky part) instead of opening a new tab in your browser it opens the same webpage inside an iframe, option.
Thanks
Take a look at this plugin, it might help you
http://plugins.jquery.com/project/jqueryContextMenu
I would suggest hiding the "Window" which will be a div or some HTML element
Once user has right clicked on an element you can access it through jquery selectors and
enable it's visibility.
css:
#hiddenFrame {
display: none;
width: 250px;
height: 250px;
}
javascript:
menu1 = { attributes: "brief_number,brief_id,...",
items: [
{
type:RightContext.TYPE_MENU,
text:"some text",
onclick:function() {$('#hiddenFrame').show();}
}
]
};
Related
I am working on a webpage. On this page there is a portfolio grid of downloadable resources that are represented with pictures. Currently if someone tries to change the filter before all of the images load it will break it.
I would like those buttons to not be clickable until all of the images on the screen have loaded, and I would like to do so using JQuery.
How can I accomplish this?
Add a class to the filters container that prevents interaction such as:
.disabled {
pointer-events: none;
}
<div id="filters-container" class="cbp-l-filters-alignCenter disabled">
And then use the initComplete.cbp event from the plugin to remove it.
$("#grid-container").on('initComplete.cbp', function() {
$('#filters-container').removeClass('disabled');
});
Hide all images by default using CSS
img{
display: none;
}
/* disable all buttons using class disabled*/
.disabled{
pointer-events: none;
}
Use Jquery to check if all loaded, then display images and enable buttons
JQuery
$(window).load(function(){
$('img').fadeIn(800); //or $('img').show('slow');
$('.disabled').css('pointer-events', 'auto');
});
I have a PHP page that I need to print. I managed to remove unwanted elements from printing with a print stylesheet (print.css) below. However it does not remove browser generated header, page numbers, URL and date. I am using bootstrap framework. bootstrap.min.css does not have any '#media print' sort of thing. Need some better CSS ideas to achieve this. Thank you.
/* Remove unwanted elements */
/* Assign class="noprint" in the HTML. Header and navigation (<div id="header"> and <div id="nav">) */
#header, #nav, .noprint
{
display: none;
}
/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}
/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}
/* Remove links */
a:link, a:visited, .navbar-link
{
display: none;
}
In a browser like chrome, when you try to print the page (Ctrl+P) it will open a dialog box.
In this box you have to select "More definitions" or something similar and then, uncheck the option of headers.
Other browsers, must have a similar way.
As far as I am aware you can not change this via css however when you bring up your browsers print dialog it should present you with an option to exclude headers and footers (i.e. page number and url).
Is not possible to remove the browser's default strings. You can achieve in Internet Explorer exploiting the "features" (also knows as bugs) that they provide you, but in the rest of browsers you can't.
I have a php page which generates links based on results from an "USERS" table, "NAME" row.
I'm using a jQuery tooltip so that a div appears when those links are hovered.
When the hover happens, I am able to get the link's text using $(this).text(), however, I don't seem to be able to parse the result so that it can link with PHP, as I want to display in the 'hidden' div certain info about the HOVERED user (e.g. his e-mail address).
Something like: When "Mike" is hovered, show Mike's e-mail address in the hover div.. and so on.
I've tried with cookies (when mouseover happens, I used something like:
$.post("gophp.php", {"name":$(this).text()}, function(results) {
nada
});
, with gophp.php setting a cookie with data from $_POST['name']) - the div inside the other page is then able to show the cookie, BUT if I hover some other link, the data which is displayed remains the same because the page has to be reloaded.
Please help me, I'm going nuts.
why are you trying to use cookies?
Why dont you use:
$.post("gophp.php", {"name":$(this).text()}, function(results) {
$('div').html(results);
});
and in your gophp.php:
<?php echo 'some_mail#address.com' ?>
(You have to adapt both php and jquery to your situation)
This seems a horrible way around what you're wanting to do. Just have the email address on the page, but initially hidden, and show it on hover.
For example, in your HTML have:
<ul class="people-list">
<li>
<a href="">
<span class="name">Martin Bean</span>
<span class="email">martin#example.com</span>
</a>
...
</li>
</ul>
And then to style it:
.people-list a {
display: block;
width: 100px;
position: relative;
}
.people-list .name, .people-list .email {
display: block;
}
.people-list a .email {
display: none;
}
.people-list a:hover .email {
display: block;
}
Should do the trick in a primitive fashion. You can then position/style as necessary.
Of course, why you want email addresses public available is a whole different topic of conversation.
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.
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.