Helo guy how are you?
I'm a younger developer that I be improve my knowledges, then right now I was travel over the internet when I finded a website very cool https://www.jinx.com With this i will try to develop something menu equal that website, but unfortunately it was in vain :(
I'm still learn a lot of HTMl, CSS, JQ and whaterever web lenguages... Could somene help me to create a menu bar like this?
Greatful now!
Use inspect in chrome(F12).You can see the css in the right corner.Make use of it.
You can follow the google devTools for Live-edit ,changes will be reflected in UI. Live-edit style property names and values in the Styles pane. All styles are editable, except the ones that are greyed out (as is the case with user agent stylesheets).
To edit a name or value, click on it, make your changes, and press Tab or Enter to save the change.
Follows this: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Hope it helps.!
Related
I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.
Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.
I want to know how the pop up windows integrated into websites are built. I am trying to create one for my websites but i don't really know it is created whether they are plugins or not. Any help as to how to go about it.
Below is an example of what i want to do.
You can use hotjar.com to put a feedback box in your page, there is a lot of services that provides this feature, but hotjar gets the job done
Beginner! To make a pop-up like the one you provided, you would need to write backend code (Node.JS, PHP, Python, etc.). But for just a simple info pop-up with a button that activates the pop-up refer to this jsfiddle I created:
https://jsfiddle.net/d706dyg7/1/
$("#whateverid").click(function(){
//whatever code
});
That mean when that element is clicked blah happens.
Hope that helps,
Ben A.K.A BlackSky
P.S. If you want a solution in pure javascript and not jQuery just let me know and I will edit my fiddle!
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
If you want to do this using ONLY html and css (using a framework in visual studio like ASP.NET) for example.. here's what I did:
First, I made sure I had multiple "divs" in my code. For me specifically, I had two main ones. The first one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
Your looking for something called a modal. Depending how you wrote your HTML there are different ways of approaching this issue.
If your wrote your website in Plain HTML you can use the following tutorial to create one
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/amp/
However if you wrote your website with a library such as Bootstrap they have built in pre made modules that you can attach to your cpde. These can Ben found in the library's documentation.
I am trying to style the scrolling picker (just what's the correct word for this would help) for a website on iOS Safari. I know that this is possible because they do it on the geico.com form (second page of this form: https://sales2.geico.com/) - but I can't figure out how they did it!
Here's a picture of the request:
Anyone have experience with this?
I did use https://mobiscroll.com/ in a previous project to achieve this, also available from https://github.com/acidb/mobiscroll if you like to fiddle around a bit by yourself.
I wanted to add an Google CSE to the gitbook instead of the normal search engine.
It's no problem to add the GCSE to the gitbook, only the result is weird.
If I go directly to a page I can see the Search Box and can use it normally. If I look at the code there is a div: <div id="__gcse_0">.
If I now go through another chapter the Search Box disappears and there is another div instead of the previous in the code: <gcse:search>.
After I refresh the page the box appears again. This happens on Firefox and Chrome.
Do somebody know what the problem might be?
I've been trying to figure out this same issue... So far, I can only get it to stay by placing the google script into an overriding layout.html - but this is not recommended, and it isn't ideal for most placements. I've also noticed that the CSS that is loaded through the script then gets lost when switching pages (like the script itself was previously) so this solution would also be a pain to re-add all the css files. So it's a super messy solution, and hopefully some one has a better solution out there.
I am trying to create a input box somewhere on the screen in chrome, not attached to extension button like a normal popup,
it also needs to be running all the time so the user doesnt need to click the extension button to open it, for example so they do not have to come out of fullscreen.
What i have so far since im not great at html or java just a simple form
What i have: http://i.imgur.com/xCY1a41.png
What i want: http://i.imgur.com/cJH8bD4.png
I would also like to control the position of the form but from what i have above doesnt seem as if i will be able,
Sorry if its a bit vague but anything helps!
What you want to do can't be done in Chrome. This is by design. If web content could display itself outside the boundaries of the browser tab's content area, then users might be confused who was presenting it. Confusion is just the beginning of that problem: if web/extension content could masquerade as a system or browser-level alert, then that content could trick the user into doing something dangerous.
If you need a presence outside of a browser tab, your options are a native app or Chrome App.
If you want the input box to be displayed on the page you could use content script - then it would appear as you presented.