Category: javascript

I’m using Laravel 10 with PHP 8.2 and Spatie Media Library to manage file attachments for my Mail model. When I try to access files from the ‘mails’ media collection in my controller, I encounter this error:

BadMethodCallException: Call to undefined method AppModelsMail::getMediaAttribute()

I haven’t defined a getMediaAttribute() method in my model, so I’m puzzled about why Laravel is trying to call this method. Here’s my current setup with the model and the controller code for fetching associated files:

Mail Model

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
use IlluminateDatabaseEloquentSoftDeletes;
use SpatieMediaLibraryHasMedia;
use SpatieMediaLibraryInteractsWithMedia;

class Mail extends Model implements HasMedia
{
    use HasFactory, SoftDeletes, InteractsWithMedia;

    protected $table = 'mails';

    protected $fillable = [
        'domiciled_id',
        'name',
        'created_at',
        'updated_at',
        'readed_at',
        'deleted_at',
    ];

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('mails')->useDisk('mails');
    }
}

Controller

use AppModelsMail;
use IlluminateHttpRequest;
use IlluminateSupportFacadesCrypt;
use IlluminateSupportFacadesStorage;
use SpatieMediaLibraryMediaCollectionsModelsMedia;

public function index(Request $request)
{
    $mails = Mail::paginate(10);

    $decryptedMails = $mails->map(function ($mail) {
        // Retrieve media items for the 'mails' collection
        $mediaItems = $mail->getMedia('mails');

        $mail->media = $mediaItems->map(function ($media) {
            // Fetch and decrypt the media file content
            $encryptedContents = Storage::disk($media->disk)->get($media->id . '/' . $media->file_name);
            $decryptedContents = Crypt::decrypt($encryptedContents);

            return [
                'id' => $media->id,
                'file_name' => $media->file_name,
                'mime_type' => $media->mime_type,
                'decrypted_content' => base64_encode($decryptedContents),
                'original_url' => $media->getUrl(),
            ];
        });

        return $mail;
    });

    return response()->json([
        'data' => $decryptedMails,
        'meta' => [
            'total' => $mails->total(),
            'current_page' => $mails->currentPage(),
            'last_page' => $mails->lastPage(),
            'per_page' => $mails->perPage(),
        ],
    ]);
}

I’m really stuck on this error and don’t understand why it’s happening. Could anyone shed light on where this error might be coming from and how to fix it?

Thanks in advance for your help!

This issue started after noticing chrome blocking third party cookies and iframes.
From my understanding, keycloak injects an iframe into the dom which is used to do a silent check, login, then return the token.

This is my _kc.init:

  _kc
    .init({
      onLoad: 'check-sso',
      responseMode: 'query',
      flow: 'implicit',
      checkLoginIframe: false,
      silentCheckSsoFallback: false,
      silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
      pkceMethod: 'S256',
    })

setting silentCheckSsoFallback: false, stops the infinite redirects, however, then it no longer does the silent check fallback to actually return the callback which leads to the user not being authenticated.
Then the url changes to:

http://localhost:3012/voting/voter/dashboard?session_state=…
With a blank screen

And I see this in the console:

Refused to frame 'https://<my-correct-url>.ca/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

requestStorageAccess: Must be handling a user gesture to use.
requestStorageAccess: Permission denied.
requestStorageAccess: Must be handling a user gesture to use.

Ive checked our live dev server, it does not have this issue because its behind https.
You need to use HTTPS because some vital cookies are blocked or rejected during authentication. This is due to the same site cookie protection scheme that was added to browsers for a few years ago.
I am not sure how to handle this on local.

when adding checkLoginIframe: false, it stopped the redirects, but then when I actually tried to login with credentials, the page doesnt redirect to the dashboard because the user is still not authenticated in the frontend without the callback token from KC.

Ive tried updating flow, responseMode and silentCheckSsoFallback.

Ive turned off the chrome setting to allow cookies, and this fixes the problem obviously.

I need to be able to grab the range of a comment in one document and find the corresponding range in a “comment-free” copy of the document.

I’ve got this working using the text search approach, but I’m trying to come up with a solution that can handle ranges that include other objects such as images.

Can anyone suggest another approach? The challenge is there isn’t a way to capture the starting and ending index of a range.

In Nuxt we have access to the server and can control server side rendering. If I create a directive v-skip that removes an element from a DOM tree but simply moves its children into its parent, for example:

<template>
  <div class="parent">
    <div class="remove-me" v-skip>
      <p>child 1</p>
      <div>
        <p>nested child 1</p>
        <p>nested child 2</p>
      </div>
    </div>
  </div>
</template>

Becomes

<template>
  <div class="parent">
    <p>child 1</p>
    <div>
      <p>nested child 1</p>
      <p>nested child 2</p>
    </div>
  </div>
</template>

This can be implemented like this and the end result works by producing the expected output, but it doesn’t run on the server. There’s a hydration mismatch of course because the <div class="remove-me"> is rendered on the server.

Now it‘s clear we don‘t have access to browser apis on the server, but Vue still has vNodes and has the ability to render html on the server.

<script setup>
const vSkip = {
  created(el, binding, vNode) {
    handleSkip(el)
  }
}

function handleSkip(elementToRemove) {
  const parent = elementToRemove.parentNode;

  while (elementToRemove.firstChild) {
    const child = elementToRemove.firstChild;
    parent.insertBefore(child, elementToRemove);
  }

  parent.removeChild(elementToRemove);
}
</script>

<template>
  <div class="parent">
    <div class="remove-me" v-skip>
      <p>child 1</p>
      <div>
        <p>nested child 1</p>
        <p>nested child 2</p>
      </div>
    </div>
  </div>
</template>

For my xpages/jsf application I have setup for an xe:input control the following validation:

<xp:this.validators>
<xp:validateConstraint
    regex="${application.regex_email}"
    message="please follow the rules">
</xp:validateConstraint>
<xp:validateRequired
    message="follow the rules">
</xp:validateRequired>
</xp:this.validators>

The regular expression I use:

regex_email=^([w-]+(?:.[w-]+)*)@(acme.org|acme.com)

(so I allow only email addresses from acme.org and acme.com domains, case sensitive).

This works fine when sending the data to the server but I want to apply something similar to validation on the client-side.

I guess in the onkeyup event a similar check occurs so only the allowed domains in lowercase characters are allowed, so as soon the user would write ‘john.doe@A’ it would be allowed BUT transformed to lowercase (john.doe@a) and when writing john.doe@s it would starts alerting the user that the domain is not acceptable.

But I do not know how. Can anyone explain how to?

I am sure this has been asked multiple times before but it seems every scenario is slightly different. I am using React to position a number of elements on a page. One of these elements is a map which needs to be sized to just under the page width but the CSS does not seem to be containing it correctly.

This is the code visible in debug:

<div id="Layout_Map_Container" class="col-sm-10">
    <div class="col-sm-10" id="Layout_SiteMap_Img" style="z-index: 10;">
        <img src="data:image/jpeg;base64,/9j/4QDORXhpZgAASUkqAAgAAAAGABoBBQABAAAAVg..." alt="Layout plan for X" id="floorMap" style="width: 100%; position: absolute;">

The second div is showing a height of 0px and the image seems to be expanding to full size of the encoded image. The first div acts as if there were nothing in it, but I am assuming that is because of the absolute positioning. What I need is for the <img /> tag to be contained withing the first div and for the entire width to be within the page. Currently the first div has the correct width.

I am sure this will be a very easy fix but my knowledge of CSS is very limited.

Thank you.

EDIT: This is the entire React code used to generate the page. All the additional elements do not seem to play a part in the actual layout as they are not containers for the map.

return (
    <div>
        <Row>
            {(isAdmin && !areMapsLoading) ?
                <span style={{ 'whiteSpace': 'nowrap', 'backgroundColor': '#ccc', 'visibility': `${currentMap !== -1 ? 'visible' : 'hidden'}` }}>
                    <label htmlFor='layoutEditSelect'>Edit</label>&nbsp;
                    <input id='layoutEditSelect' type='checkbox' ref={editRef}
                        onClick={async (e) => { setEditMode(e.target.checked); }}
                    />
                </span>
                : <span></span>
            }
            <Col sm={10}>
                {//(editMode && currentDesk != null) 
                    false ?
                        <div style={{ position: 'absolute', top: '100px', left: '300px' }}>

                            <Row>
                                <Col>Left</Col><Col>{Math.round(currentDesk.x)}</Col>
                                <Col>Height</Col><Col>{currentDesk.height}</Col>
                            </Row>
                            <Row>
                                <Col>Top</Col><Col>{Math.round(currentDesk.y)}</Col>
                                <Col>Width</Col><Col>{currentDesk.width}</Col>
                            </Row>
                            <Row>
                                <Col>Rotation</Col>
                                <Col>{currentDesk.rotation}&deg;</Col>
                            </Row>

                        </div>
                        : ''
                }
            </Col>
        </Row>
        <Row>
            <Col sm={1}>
                <Row>
                    <Col>
                        {!areMapsLoading ? (
                            buildMapSelector()
                        ) : (
                            <Loading title="Map Data" />
                        )}
                    </Col>
                    <Col>
                        {
                            editMode && mapScale.height ? (<AddDesks
                                maps={maps}
                                deskTypes={deskTypes}
                                desks={desks}
                                editMode={editMode}
                                scale={mapScale}
                                currentMap={currentMap}
                                fns={AddDesksFns}
                                
                            />
                            )
                                : ''
                        }
                    </Col>
                </Row>
            </Col>
            <Col sm={10} id="Layout_Map_Container" ref={mapContainer}>
                <div
                    ref={mapContainer}
                    style={{
                        width: "100%",
                        height: `${window.height}px`,
                        position: "absolute",
                        zIndex:10
                    }}
                    onClick={() => clickMap()}
                    onLoad={
                        () => {
                            //console.log("load");
                            getScale();
                            clickMap();
                        } /*If map is reset, set current desk to null*/
                    }
                    className="map"
                    id="Layout_SiteMap_Img"
                >
                    <img
                        src={mapImage}
                        style={{ width: "100%", position: "absolute" }}
                        alt={`Layout plan for ${maps.maps[currentMap]?.currentSite?.SiteName}`}
                        ref={mapRef}
                        id="floorMap"
                        onLoad={getScale}
                    />
                    <React.Fragment>{buildDesks()}</React.Fragment>
                </div>
            </Col>
        </Row>
        {showStatus(currentDesk)}
    </div>
);

I feel so stupid seeing people use these terms I don’t understand, it feels like there is so much to learn.
I’m learning javascript right now and it makes a lot of sense, like its all pretty easy, but all these big terms and other languages are making it seem really difficult, I’m not struggling right now but I’m scared that what if I’ll never understand.
I’m 15 by the way so maybe it just looks scary because most people have gotten a proper education and taken classes?
Sorry I hope that makes sense. Did anybody else feel like that as a beginner?

They’re trying to close my question but the question here is just, like, did anybody feel the same way?

For my xpages/jsf application I have setup for an xe:input control the following validation:

<xp:this.validators>
<xp:validateConstraint
    regex="${application.regex_email}"
    message="please follow the rules">
</xp:validateConstraint>
<xp:validateRequired
    message="follow the rules">
</xp:validateRequired>

</xp:this.validators>

The regular expression I use:

regex_email=^([w-]+(?:.[w-]+)*)@(acme.org|acme.com)

(so I allow only email addresses from acme.org and asme.com domains).

This works fine but I want to apply the same to validation to the client-side, so in the onkeyup event that same (or similar) regex is used. But I do not know how. Can anyone explain how to?

Basically I want to prevent that users enter capitals in the allowed mail domains.

How do I do smooth movement in JS Graphics on CodeHS. Everything I see when I try to Google it is for when you’re doing JS with HTML.

Here’s my current code

let centerX = getWidth()/2;
let centerY = getHeight()/2;
let sqr;

function start(){
    createSquare();
    keyDownMethod(move);
}

function createSquare(){
    sqr = new Rectangle(50,50);
    sqr.setPosition(centerX-50/2,centerY-50/2)
    add(sqr);
}

function move(e){
    if(e.keyCode == Keyboard.letter('W') || e.keyCode == Keyboard.UP){
        sqr.move(0,-5);
    } else if(e.keyCode == Keyboard.letter('S') || e.keyCode == Keyboard.DOWN){
        sqr.move(0,5);
    } else if(e.keyCode == Keyboard.letter('A') || e.keyCode == Keyboard.LEFT){
        sqr.move(-5,0);
    } else if(e.keyCode == Keyboard.letter('D') || e.keyCode == Keyboard.RIGHT){
        sqr.move(5,0);
    }
}

At first I tried putting a move 1 in a for loop but it still basically just snaps to a position. I also tried doing that but with setTimeout but instead of waiting for the amount of milliseconds I put each time it loops it just waits and then does the loop the set amount of times even though the set time out is inside of the loop.

Lets suppose that I have a d.ts file that it imports types from other d.ts files which import types from other d.ts and it goes on.

Is there any tool that will allow me to create a single d.ts file from this tree that does not include all its dependencies and avoids name duplication?

The file index.d.ts is simply a collection of all the necessary declarations, and within them (for example, in data-grid.d.ts), there are also imports of external declarations.

index.d.ts

export * from './common.d.ts';
export * from './data-grid.d.ts';
export * from './tree-list.d.ts';
export * from './data/custom_store.d.ts';

I want to get a single declaration file with all the collected types and declarations.

I try to use rollup + rollup-plugin-dts

here is config

rollup.config.js

const { dts } = require('rollup-plugin-dts');

exports.default = {
  input: './index.d.ts',
  output: {
    file: 'dist/types.all.d.ts',
    format: 'es'
  },
  plugins: [dts()]
};

Everything builds without errors, but in the file types.all.d.ts, I get some types with unnecessary suffixes.
For example:

declare class NestedOption<P> extends React$1.PureComponent<P, any> {
    render(): React$1.ReactNode;
}

declare class AsyncRule$1 extends NestedOption<IAsyncRuleProps> {
  static OptionName: string;
  static IsCollectionItem: boolean;
  static PredefinedProps: {
    type: string;
  };
}

How can I get rid of these suffixes in the type names?

How would you suggest combining the tree of declarations into a single file?

P.S.: I understand that the problem might be due to the attempt to resolve duplicated names, but I cannot control or change the external declarations as they are the result of builds. Thank you in advance.

The simple code explains my problem best:

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }
  </script>
</head>
<body>
  <div onclick="showDiv(1, '<div onclick='showDiv(2, 'test C');'>test B</div>')">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>
</html>

the argument by onclick function contains a functions with arguments (strings).
doesn’t work like that.
I think the apostrophes are the problem.
pls help. thx

my code above explains my problem best

I am implementing a solution that allows me to create points (sprites) in a pdf in the Autodesk viewer.
For this I am using the DataVisualization extension.
But the problem is that when creating the sprite, I can’t rotate it.
Does anyone know a way to rotate these sprites?

I need the sprite to rotate to direct it to the area I want to point to

I’m creating a custom language that will be like Javascript, with less functions in it. I want only my custom completions to be displayed.

Can I disable all existing completions items in javascript ? (I don’t want to totally disable items because mine would disappear)

Another option would be to create a custom language, but I will lose all javascript formatting. I’m only using Javascript, no other framework.

<Multiselect
   @change="onSelect"
   :options="countries"
   valueProp="iso2"
   placeholder="Select countries"
   :searchable="true"
   :multiple="false"
   :close-on-select="true"
   :clear-on-select="false"
   :preserve-search="true"
    openDirection="bottom"
    :max-height="600"
    :max-select="1"
    :object="true"
 >
<template v-slot:option="{ option }">
  <span :class="`fi fi-${option.iso2.toLowerCase()} mr-2`"></span>
     {{ option.code }}
</template> 
                      
<template #singleLabel="{ option }">
   <span :class="`fi fi-${option.iso2.toLowerCase()} mr-2`"></span>
        <input v-model="option.name" />  </template>
</Multiselect> 

Basically the issue I am facing here is that i want to show the selected option containing flag and its code in v-modal and show it , but now when i am selecting anything i can’t see any thing selected, I also tried adding v-modal field , it contained the selected value of country in form of object. I dont have problem with its value but I just want to show my user the selected option in form of the country code and flag .

Please let me know if anyone have any idea to achieve it

I built an online catalogue for the store I work at. No you cannot order from it. Its not its intended purpose. I am after making close to a hundred html pages now for the store. My issue is if I edit one item in the nav menu I have to copy and paste it into all the html files. Is there a way around this. here is the html for the nav.

<nav class="navbar navbar-expand-lg navbar-dark nbc">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/nictech.png" style="height:50px;"
        alt="Nictech Electronics Ltd. "></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
      <ul class="navbar-nav">
        <li class="nav-item active"> <a class="nav-link" href="index.html">Home </a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Products </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="stereosradios.html"> Stereos & Radios </a>
            <li><a class="dropdown-item" href="#">Headphones & Speakers &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="bluetoothspeakers.html">Bluetooth Speaker's</a></li>
                <li><a class="dropdown-item" href="headphones.html">Headphone's</a></li>
              </ul>
            <li><a class="dropdown-item" href=""> TVs & Home Theatre &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="tvs.html">TVs</a></li>
                <li><a class="dropdown-item" href="soundbars.html">Soundbar's</a></li>
                <li><a class="dropdown-item" href="wallmounts.html">Wall Mounts</a></li>
              </ul>
            <li><a class="dropdown-item" href="#"> Musical Instruments &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="fullsizeguitars.html">Full Size Guitars</a></li>
                <li><a class="dropdown-item" href="34sizeguitars.html">3/4 Guitars</a></li>
                <li><a class="dropdown-item" href="ukulele.html">Ukulele</a></li>
                <li><a class="dropdown-item" href="percussion.html">Percussion</a></li>
                <li><a class="dropdown-item" href="harmonicas.html">Harmonicas</a></li>
                <li><a class="dropdown-item" href="#">Accessories &raquo</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="strings.html">Strings</a></li>
                    <li><a class="dropdown-item" href="tuners.html">Tuners</a></li>
                    <li><a class="dropdown-item" href="musicstands.html">Music Stands</a>
                    <li><a class="dropdown-item" href="capos.html">Capos</a>
                    <li><a class="dropdown-item" href="musiccases.html">Cases</a>
                  </ul>
              </ul>
            <li><a class="dropdown-item" href="#"> Computers &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="desktops.html">Desktop's</a></li>
                <li><a class="dropdown-item" href="laptops.html">Laptop's</a></li>
                <li><a class="dropdown-item" href="compmonitor.html">Monitors</a>
                <li><a class="dropdown-item" href="compkeyboardsandmice.html">Keyboards & Mice</a>
                <li><a class="dropdown-item" href="#">Storage &raquo</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="compharddrives.html">Internal & External Hard Drives</a>
                    </li>
                    <li><a class="dropdown-item" href="compdvdrec.html">DVD Recorders</a></li>
                    <li><a class="dropdown-item" href="compflashdrives.html">USB Flash Drives</a></li>
                    <li><a class="dropdown-item" href="compcardreadersd.html">SD Card's & Card Readers</a></li>
                  </ul>
                <li><a class="dropdown-item" href="compspeakersheadset.html">Speakers & Headphones</a>
                <li><a class="dropdown-item" href="compwebcams.html">Webcams</a></li>
                <li><a class="dropdown-item" href="compusbhubs.html">USB Hubs</a></li>
                <li><a class="dropdown-item" href="complaptopadapters.html">Laptop Adapters</a></li>
              </ul>
            <li><a class="dropdown-item" href="#"> Home Phones &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="cordedphones.html">Corded Phones</a></li>
                <li><a class="dropdown-item" href="cordlessphones.html">Cordless Phones</a></li>
              </ul>
            <li><a class="dropdown-item" href="#">Cables &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="#">Audio Cables & Adapters &raquo;</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="hacables.html">3.55mm Cables</a></li>
                    <li><a class="dropdown-item" href="harcacables.html">RCA Cables</a></li>
                    <li><a class="dropdown-item" href="haadapters.html">Audio Adapters</a></li>
                    <li><a class="dropdown-item" href="haoptical.html">Optical Cables</a></li>
                  </ul>
                <li><a class="dropdown-item" href="#">HDMI & Display Port &raquo;</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="hvhdmi.html">HDMI</a></li>
                    <li><a class="dropdown-item" href="hvhdmiacc.html">HDMI Accessories</a></li>
                    <li><a class="dropdown-item" href="hvdisplayport.html">Display Port</a></li>
                  </ul>
                <li><a class="dropdown-item" href="musiccables.html">Music </a></li>
                <li><a class="dropdown-item" href="ntcables.html">Networking Cables</a>
                <li><a class="dropdown-item" href="#">USB &raquo</a>
                  <ul class="submenu dropdown-menu">
                    <li><a class="dropdown-item" href="causb.html">USB</a></li>
                    <li><a class="dropdown-item" href="causbc.html">USB C</a></li>
                    <li><a class="dropdown-item" href="calightning.html">Lightning USB</a></li>
                    <li><a class="dropdown-item" href="causbmini.html">Mini USB</a></li>
                    <li><a class="dropdown-item" href="camicrousb.html">Micro USB</a></li>
                  </ul>
              </ul>
            <li><a class="dropdown-item" href="networking.html">Networking</a>

            <li><a class="dropdown-item" href="#">Batteries &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="buttoncell.html">Button Cell</a></li>
                <li><a class="dropdown-item" href="alkaline.html">Alkaline</a></li>
                <li><a class="dropdown-item" href="phonebatteries.html">Cordless Phone</a></li>
                <li><a class="dropdown-item" href="lithium.html">Lithium</a></li>
              </ul>
            <li><a class="dropdown-item" href="#">Power & Charging &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="usbchargingblocks.html">USB Charging Blocks</a></li>
                <li><a class="dropdown-item" href="causbcables.html">USB Charging Cables</a></li>
                <li><a class="dropdown-item" href="powerbars.html">Power Bars</a></li>
                <li><a class="dropdown-item" href="capower.html">Power Cables</a></li>

              </ul>
            <li><a class="dropdown-item" href="#">Home Security &raquo; </a>
              <ul class="submenu dropdown-menu">
                <li><a class="dropdown-item" href="securitycameras.html">Security Cameras</a></li>
              </ul>
          </ul>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="aboutus.html"> About </a></li>
        <li class="nav-item"><a class="nav-link" href="contactus.html">Contact Us!</a></li>
        <li class="nav-item"><a class="nav-link" href="http://www.facebook.com/nictechelectronics"
            target="_blank"><img src="img/facebook.png" style="height:35px;" alt="Facebook"> </a></li>
      </ul>
    </div> <!-- navbar-collapse.// -->
  </div> <!-- container-fluid.// -->
</nav>