I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
Related
Here is the desired outcome I'm looking to achieve by scrolling using react-scroll-parallax.
On Mobile browser
View web browser example here
Description
I want to create a website with the parallax affect shown above. The key elements being a website build in react containing three pages.
While scrolling from Page 1 to Page 2 I want the mobile device mock to start halfway on the screen (as to avoid the other content of page 1), then move to being basically centered.
While scrolling from Page 2 to Page 3, the website and components stick and once again act like a normal website scroll.
Additionally, during the scroll from Page 1 to Page 2, I want the content inside the device mock to scroll as well.
What I tried
For starters I was able to get nearly the affect I wanted by using a div with it's z-index and absolute position set, and parallax on translateY of -50, 125.
<div className={"absolute z-10 w-full"}>
<Parallax translateY={[-50, 125]}></Parallax>
</div>
The problem became however when I wanted to place content inside the div. Having another div within the parallax that also had z-index set seemed to mess with the parallax affect.
Important notes
Content inside device mock
One issue I found that was tricky was trying to place the content inside the device mock. I want a parallax both on the device mock itself, and the content within it.
I'm not entirely sure how I should crop the content inside the device mock.
The device mock svg frame and device mock mask can be found here if you want to give it a try
Device mock svg and mask
I tried imgs with various z-indexes, masking the div with an svg mask, using image backgrounds. Nothing is quite getting the preferred outcome.
Scaling of device mock
I want to make sure this works well on both mobile and browser. With that said I was trying to use margins to scale the device mock but I had a hard time with trying to then correctly get the mask to work for the content within the mock.
I'm not sure if using dedicated width and height sizes would be the ideal way to go, but very open to suggestions! It seems hard to scale the device frame and the mask properly.
Parallax of device and parallax of device content
I want the content inside the device mock to be html so that I can change it more than just an image. That being said the most important feature I want is for both the device and the content inside to have a parallax scroll affect.
Summary
I know this is a bit much for a quick simple stack overflow issue, but I've been trying a lot to get this to work and just can't seem to nail down the little details correctly. I sincerely appreciate all help and suggestions and if there is anything else I can provide please let me know!
The trickier part of the request was blowing up the <svg>, adding new <path /> and <clipPath /> for the color swap inside the phone mock.
Eventually I got it working here. The part linking the clipPath transition to the scroll progress looks like this:
const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
(a) =>
setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
[setY]
);
const { ref } = useParallax({
translateY: [0, 185],
onProgressChange
});
The 1739 and 36 are max and min values for the translation and they are strictly related to the svg's viewBox. The other values allow tweaking the start, end and speed of animation, with regards to overall scroll progress.
This, together with some CSS, took care of binding the right animations to the correct scroll progress.
Feel free to tweak it some more, especially if you add more markup.
The other thing I wanted was a function activated shortly after scrolling, which would snap the scroll to certain positions. Namely, to the .page elements.
I used gsap's ScrollTrigger plugin for the task, for multiple reasons:
I'm somewhat familiar with it (used it before)
it's performant, light and non-obtrusive (basically quits when it detects another user scroll)
listens to all relevant events (touch, mouse pointer, keyboard) without me having to make sense of them, providing a unified interface.
uses inertia (if you scroll down faster from page 1 it will scroll past page 2, directly to page 3 - other scroll plugins limit you to having to scroll once for each page change)
works well on mobile devices
There are other libs/plugins out there for the task, you don't have to use gsap (although I do think it's awesome). If you end up including it in your project, make sure you comply with their licensing (which is not MIT).
By the way, my first choice for the parallax effect per-se would also be gsap, as their timelines provide a lot of flexibility and options.
Their most advanced stuff is reserved for subscribers, but even if you limit yourself to the free plugins, you're still getting more than from alternative libs/plugins, IMHO.
See it working.
How can i change the marker icon on directions on google maps?
NOTE: The dirty approach of pure CSS based on the classes ids of container elements is not accepted nor a js search-and-replace the img src.
After expired bounty and lots of research im answering my own question: In Google maps API v3, since 24 June 2014 there seems to be no official way to change these markers.
Possible dirty solutions:
CSS:
set display:none to whatever class the image is, and set a custom background on the parent div. set width and height accordingly.
Click functionality between "directions"-"markers on map" will be maintained, but something as little as a change in the class name returned by the API will cause problems. Not semantically correct as the image displayed is a background of a div, and its not clickable.
JS:
Add a listener and after the directions call, when map is idle, search the markup for the image and replace the img src. Will fail if markup returned from API is changed since you have to select by id, class name or something similar.
JS:
Scrap the data, and re-render as you wish. Click functionality between "directions"-"markers on map" of course is lost, and still unstable since is based on scrapping.
In any of the above cases you ll have to suppress markers in markerOptions and also change the marker that is used as point "A" and point "B" to match your dirty solution result.
Will be more than happy to see a better answer than this.
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").
In other topics I've found that IE/FF doesn't print background images by default. Now that's a shame, because background images add some possibilities that are very difficult to reproduce with classical <img> tags:
You can align them both horizontally and vertically
You can crop them if they are larger than the target element (which also enables the idea of CSS sprites)
Now, it's not impossible to do, but it will require me to have different HTML layouts for printing and normal page, and the printing layout will be quite overcomplicated (since I'll have to use <table>s to achieve vertical alignment). Also, the benefits of CSS sprites will be lost.
Is there any hope? I gather that #media print doesn't help, but isn't there something else, maybe browser-specific, that would allow one to say: "Yes, this isn't a normal background, it really needs to be there even in print view"?
Not possible. You would have to some how convert your background images to img or use Canvas. Of course using canvas depends on which IE you supporting.
Its a browser setting which restricts the printing of background images. I think the logic behind it was that the vendors wanted to give the users the option of printing background images and ensure that the web developer could not alter these settings through some sort of script.
As a general rule, background images should be reserved for adding to the page design but aren't essential to understanding the content. Therefore it shouldn't matter if they are missing when the page is printed. If something (such as a product shot) is important, then it should be included as an actual image (which has the added bonus of being more accessible).
Could you look at including the image, then hiding it using CSS and duplicating is as a background image (perhaps dynamically using JS)? That way, you can ensure the image itself shows in your print stylesheet, and you get the benefits that having a background image brings. I've created a very simple example here.