How gmail implements 'add link to mail' function? - javascript

I want to know how gmail implements its add link to mail function - is it a div which changing it's display? Is it another layer? Or is it something else?
Thanks in advance,
oz radiano.

Are you talking about one of these?
Add link form
GMail Add Link 1 http://www.kalleload.net/uploads/thumbnails/bxpwxqpauzxe.png
Floating link toolbar
GMail Add Link 2 http://www.kalleload.net/uploads/thumbnails/rrdkcg_tuqjfypvmlra.png
(click images to enlarge)
Edit:
The main secret is that you want to pull your box out of the flow of the HTML. This is easily done using position: absolute; and then position the box using top, left, right and bottom.
For example, here's a code snippet (full code example):
.box {
background: #fff;
border: 3px solid #333;
left: 2.00em;
padding: 2.00em;
position: absolute;
top: 2.00em;
}

Asynchronous javascript server callbacks with DOM manipulation. More then just swapping out the html in one big div, but updating things only where they need to be and when they need to be.

Related

I have to remove a look like small triangle component displyed on website page title on wright side

I am Designing & developing a website with help of a Wordpress theme. The link to the page where I am stuck is "https://8degreethemes.com/demos/?theme=eightmedi-lite". In this page in Page title bar, the title is appears in a box having light blue color and on the box right side bottom corner, a small triangle shape appears. I need to remove this triangle. I changed the bg-color of title box to the transparent but triangle did not change its color. Please help me to figure it out. I have shared a link of a screenshot with this to highlight the triangle. Also, the theme is free so you can easily download it and look all the files for the solution.
Thanks
that is the pseudeo :: after of your element
in your css file
https://8degreethemes.com/demo/8medi-lite/wp-content/themes/eightmedi-lite/style.css?ver=4.8.5
remove this block of CSS code:
h1.page-title:after, .sidebar .widget-title:after{
content: "";
border-bottom: 15px solid #70c0e8;
border-left: 15px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
It is generating because of some css. You have to check where it is coming from by developer tool in chrome or any other tool.
I have checked the demo web page and found this line css line
border-bottom: 15px solid #70c0e8;
in your style.css
Have a look
Just remove it to remove that triangle, but remember if you remove this line, it will remove that triangle from all other places where this class is referenced.

image overlay toggle button on screen

so i have this image code css, it works with some html also. what im trying to do is have an on screen button that toggles this code off or on. this is for my website. i want it default it's off. also, is it possible for the code to remember the users choice? like if the user wanted the overlay on, and then went to the other page, i would like it to remember the choice. sorry for my eng.. im learning.
css
div.nightmode {
opacity: 0.05;
background: url(**image url**);
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
pointer-events: none;
}
html
<body>
<div class="nightmode"></div>
</body>
You have couple ways to do it. I think the best one is use cookies.
Here small example:
click on DIV to toggle
https://jsfiddle.net/sdx2rba9/49/
after refresh page cookie set background to previous choice
Cannot post in stackoverflow built-in jsfiddle (cookie-secrity).
REMEMBER: I am not advanced coder so my code can be not clean or written by long way.

Sliding css and js content filter

I'm making a jquery mobile app and have a page that needs to filter some posts.
I have the posts put in as well as the design of the filter.
You can see what it looks like below:
I've been trying to animate it so if the user presses "social" on the right, "outside" and "business" will get pushed out to the left so the filter you have selected is always in the centre, between the two dividers.
Here's an example of the sort of js I was going to use to move the divs around but just for 1 div instead of 3:
$(function(){
var c=0;
$("#click").click(function(){
$(this).stop().animate({left: ++c%2*100 }, 'fast');
});
});
The problem i was having is that if the user was to press the button on the right or left every time it would need to have an infinite number of divs sliding in and I was just wondering how to implement this.
Here's a jsfiddle with the assets I'm using (Without the jquery mobile styling)
https://jsfiddle.net/xczy346z/
EDIT: Here's also a gif of what I want to happen if you can't understand what I'm trying to make. Example Gif
Use this javascript
$(document).ready(function(){
$("#social_one").click(function(){
$("#side_scroll").animate({marginLeft: '-=130px'}, 500);
});
});
`
Theoretically, may I suggest that you remove your dividers (#divider_***), both from the html and css, and add them as a pseudo on the text_slider like this
#text_slider:after {
content: "";
position: absolute;
left: 33%;
top: 10%;
bottom: 10%;
width: 33%;
border-left: 1px solid white;
border-right: 1px solid white;
pointer-events: none;
}
Doing like this keeps the side_scroll clean and only the "buttons" to work with when animate.
Now you can simply just animate your side_scroll to right or left having the selected "button" in the middle no matter how many they will be.
Here is an updated fiddle of yours showing the pseudo:

How do you get rid of a random "pressed" class popping up on <div> click?

I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.

Show the URL preview in the bottom left of the browser for a clickable div

I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>

Categories

Resources